今天我在考虑 CSS 定位模式,并意识到 除了在子元素上工作position:relative
之外,我从不使用任何其他方式。position:absolute
我更像是一个“开发人员”而不是“设计师”,但这些年来我已经做了很多基于 CSS 的布局。我使用过表格、浮动、边距(正和负)、位置:绝对,甚至位置:固定,但我认为我从未使用过位置:相对于实际定位元素。
是否有一些很棒的 CSS-guru 技术依赖于 position:relative (并用于现实世界的设计)?我错过了吗?
今天我在考虑 CSS 定位模式,并意识到 除了在子元素上工作position:relative
之外,我从不使用任何其他方式。position:absolute
我更像是一个“开发人员”而不是“设计师”,但这些年来我已经做了很多基于 CSS 的布局。我使用过表格、浮动、边距(正和负)、位置:绝对,甚至位置:固定,但我认为我从未使用过位置:相对于实际定位元素。
是否有一些很棒的 CSS-guru 技术依赖于 position:relative (并用于现实世界的设计)?我错过了吗?
如果您想抵消一个元素而不用考虑边距及其对其他元素的影响,这很有用。假设您想故意将图像从容器的侧面伸出,并(几乎)与旁边容器中的某些内容重叠。
------------- -----
| | | |
| X -------| Y |
| | a || |
| -------| |
------------- -----
容器a
是正常文本流的一部分X
,你想保持这种状态,你只是想让它从侧面伸出一点,作为一个整洁的效果。如果您使用边距执行此操作,它可能会变得非常混乱并重排您的其他一些内容。
通过使用position: relative; left: 10px;
,您可以轻松获得该效果而不会产生副作用。
我使用position:relative;
这样上标字符仍然可以升到上面,vertical-align: top;
但不允许它们弄乱我的段落的开头。
sup {
font-size: .7em;
vertical-align: top;
position: relative;
top: -.1em;
}
我不止一次使用它来显示标题图像之类的内容,例如:
<div id="header">
<div id="logo"></div>
<div>
CSS:
#header { width: 1024px; margin: 0 auto; background: url(string.jpg); }
#logo { position: relative; left: 40px; background: url(logo.jpg); }
在这种情况下,标题有一个大条纹作为背景图像,徽标位于条纹中,只是稍微偏移了一点。在某些情况下,我认为比填充/边距更简单地改变一些东西,也许这只是意见。
当我想相对于其父元素定位一些绝对元素时,我主要使用它。在这种情况下,父元素需要设置为position: relative
. 这就是它的用途。
此外,我还在这里和那里使用它来修复具有背景图像的块元素中的 IE6/7 haslayout/闪烁错误。