Как удалить пробелы, которые появляются после относительного позиционирования элемента с помощью 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">
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>JSFiddle: http://jsfiddle.net/qqXQn/
Как вы можете видеть в например, единственным пробелом, который я хочу, является пробел, вызванный блоком thetext по краю 50px; и интервал по footerallowedwhitespaceinblue(сделанный синим, чтобы он был видимым). Проблема... пробелы теперь слишком велики, потому что div" buy this " все еще занимает место после того, как он был относительно расположен.
Как я могу это решить?
8 ответов
вы можете просто решить эту проблему, применив отрицательное поле, равное ширине или высоте элемента.
для элемента высотой 100px, который расположен сверху, вы примените margin-bottom: - 100px;
для элемента высотой 100px, который расположен внизу, вы примените margin-top: - 100px;
для элемента шириной 100px, который расположен слева, вы примените margin-right: - 100px;
для элемента 100px ширина, которая расположена справа, вы будете применять 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">
buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>вот пример. В этом случае объект был перемещен вправо, а затем вверх с использованием отрицательного верхнего значения. Устранение его пространства задней маржи требовало добавления равного значения отрицательной маржи.
position:relative;
width:310px;
height:260px;
top:-332px;
margin-bottom:-332px;
left:538px;
вы можете решить эту проблему, предоставив float: left before position: relative. Используйте свойства margin-left, margin-top вместо top, также слева.
Если вы достаточно храбры, вы можете поставить overflow:hidden; и bottom negative margin на относительно позиционированном элементе, и он удалит остаток интервала:) т. е. на отзывчивом сайте.
но убедитесь, что он не скрывает необходимый контент.
установите относительный elememt сверху на размер родительского шрифта, как этот код:
html в шаблоне jade:
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;
}
это работает для меня!
установите внешний div как "position: relative" div, который вы хотите переместить как "position: absolute", и установите верхние и левые значения. это расположит элемент относительно внешнего div (а не страницы). относительное положение оставляет зазоры. абсолютного нет.
Это не сработало для меня, имея 4 отдельных взаимосвязанных относительных позиций друг друга. Я не мог заставить его работать, даже добавляя и перемещая каждый из них:
В настоящее время это оптимизировано (см. http://christ.eye-of-revelation.org/index.html 2-я страница), но во всех случаях они используются для выделения области изображения в соответствии с размером носителя или окна...
решение было глобальным и гораздо более простым; он также использовался для двух отдельных блоков для имитации и замены двух страниц: все проблемы решаются, определяя ширину и высоту области и просто устанавливая ее стиль = " overflow: hidden;"
надеюсь, это может помочь.