Как удалить пробелы, которые появляются после относительного позиционирования элемента с помощью CSS

Я смотрел далеко и широко для этой проблемы и, наконец, нашел решение на каком-то неясном форуме на странице № 10 google. Решение находится в ответе

Возникает следующая проблема: После относительного позиционирования элемента с CSS я получаю пробел где элемент был... Я не хочу пробел!

    .thetext 
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;
        
    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

Ответ 1

Вы можете просто решить это, применив отрицательный запас, равный ширине или высоте элемента.

Для элемента высотой 100 пикселей, который расположен сверху, вы примените margin-bottom: -100px;

Для элемента высотой 100 пикселей, который расположен снизу, вы примените margin-top: -100px;

Для элемента шириной 100 пикселей, который расположен слева, вы примените margin-right: -100px;

Для элемента шириной 100 пикселей, который расположен справа, вы будете применять margin-left: -100px;

вырезать и вставить фрагменты css:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

И код с переработанным примером будет затем:

.thetext 
{
    width:400px;
    background:yellow;
    border: 1px dashed red;
    margin:50px;
    padding:5px;
    font-weight:bold;
}
.whiteblob
{
    position:relative;
    top:-140px;
    left:70px;
    width:200px;
    height:50px;
    margin-bottom:-50px;
    border: 4px solid green;
    background:white;
    font-size:2.5em;
    color:red;
    
}
.footerallowedwhitespaceinblue
{
    height:10px;
    background-color:blue;
}
.footer
{
    background-color:grey;
    height:200px;
}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
</div>
<div class="whiteblob">
    &nbsp;buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>

Ответ 2

Вот пример. В этом случае объект был перемещен вправо, а затем вверх, используя отрицательное верхнее значение. Устранение своего пространства заднего поля потребовало добавления равного отрицательного значения маржи.

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;

Ответ 3

Вы можете решить эту проблему, указав float: left before position: relative. Используйте также поля слева и слева вверху, а не сверху, также слева.

Ответ 4

Если вы достаточно храбры, вы можете положить overflow:hidden; и bottom negative margin на относительно позиционированный элемент, и он удалит оставшееся расстояние:), то есть на отзывчивом сайте.

Но проверьте, не скрывает ли он необходимый контент.

Ответ 5

установите относительный размер элемента elememt для родительского шрифта, например, этот код:

html в шаблоне нефрита:

div.dialog(id='login')
        div.dialog-header
            span.title login
            a.dialog-close(href="")  X
            hr
        div.dialog-body
            p hello this is body
            hr
        div.dialog-footer
            p this is footer

и css:

    .dialog
    {
        height: 100%;
        position: absolute;
        top: -100%;
        right: 50%;
        left: 50%;
        bottom: 100%;
        border: 2px solid rgba(255, 255, 255,1);
        border-radius: 3px;
        font-size: 14px;

    }   
.dialog-body{
        position: relative;
        background-color: #F99;
        height: 80%;
        top: -14px;
    }
    .dialog-header{
        position: relative;
        height: 10%;
        background-color: #F9F9F9;

    }
    .dialog-footer{
        position: relative;
        height: 10%;
        top: -28px;
        background-color: #F9fdf9;

    }

это сработало для меня!

Ответ 6

Установите внешний div как "position: relative" div, который вы хотите переместить как "position: absolute", и установите верхнее и левое значения. это будет позиционировать элемент относительно внешнего div (а не страницы). относительное положение оставляет пробелы. абсолютный не.

Ответ 7

Это не сработало для меня, имея 4 отдельных взаимосвязанных друг друга относительных положения. Я не мог заставить его работать, даже добавляя и переставляя каждый из них:

В настоящее время это оптимизировано (см. http://christ.eye-of-revelation.org/index.html 2-я страница), но во всех случаях они используются для выделения области изображения в соответствии с на размер носителя или окна...

Решение было глобальным и гораздо более простым; он также использовался для двух отдельных блоков для имитации и замены двух страниц: все проблемы решены, определяя ширину и высоту области и просто устанавливая ее стиль = "переполнение: скрыто"

Надеюсь, это поможет.

Ответ 8

установите высоту в 0: height:0px;.

Теперь этот div можно поместить где угодно.