我如何相对定位一个元素,并让它不占用文档流中的空间?
当前回答
通过阅读,似乎只要父元素相对定位,您就可以绝对定位一个元素。这意味着如果你有CSS:
.parent {
position: relative;
}
.parent > .child {
position: absolute;
}
那么子元素就不会在文档流中占用任何空间。然后你可以使用“left”,“bottom”等属性来定位它。在父元素上的相对位置通常不会影响它,因为如果你没有指定“left”、“bottom”等,它将默认位于其原始位置。
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
其他回答
添加与您移动的像素相等的边距:
例子
.box {
position: relative;
top: -30px;
margin-bottom: -30px;
}
@Bekim Bacaj给了我完美的答案,尽管这可能不是OP想要的(尽管他的问题有解释的余地)。话虽如此,Bekim并没有提供一个例子。
<h1>Beneath this...</h1>
<style>
.HoverRight {
background: yellow;
position: absolute;
right: 0;
}
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>
上面的例子设置了一个元素…
使用纯粹和简单的CSS,没有其他 垂直定位,就像它在流中一样(默认顶部设置) 水平定位于页面的右边缘(右:0) 不占用任何空间,但会随着页面滚动而自然移动(位置:绝对)
通过阅读,似乎只要父元素相对定位,您就可以绝对定位一个元素。这意味着如果你有CSS:
.parent {
position: relative;
}
.parent > .child {
position: absolute;
}
那么子元素就不会在文档流中占用任何空间。然后你可以使用“left”,“bottom”等属性来定位它。在父元素上的相对位置通常不会影响它,因为如果你没有指定“left”、“bottom”等,它将默认位于其原始位置。
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
您只需通过设置position: absolute将该元素从文档流中移除,并让它的断点随内容的动态流自由移动,而不指定左、上、右和下样式属性,这将迫使它动态地使用流的相对端点。这样,绝对定位的元素将跟随文档流,同时将自己从占用空间中移除。
不需要假包装。
你想做的听起来像是绝对定位。另一方面,你可以创建一个伪相对元素,通过创建一个零宽零高的相对定位元素,本质上只是为了创建一个位置的参考点,以及其中的一个绝对定位元素:
<div style="position: relative; width: 0; height: 0">
<div style="position: absolute; left: 100px; top: 100px">
Hi there, I'm 100px offset from where I ought to be, from the top and left.
</div>
</div>
推荐文章
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 复选框输入是否只在被选中时才发布数据?
- 带引导的固定宽度按钮
- 是类型="文本/css"必须在<链接>标签?
- 在没有jQuery的情况下,防止悬停父div的子元素时onmouseout