2025年详解CSS定位的应用及注意事项（集锦6篇）.docx

该【2025年详解CSS定位的应用及注意事项（集锦6篇） 】是由【mama1】上传分享，文档一共【27】页，该文档可以免费在线阅读，需要了解更多关于【2025年详解CSS定位的应用及注意事项（集锦6篇） 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。2025年详解CSS定位的应用及注意事项（集锦6篇）
篇1：详解CSS定位的应用及注意事项
在讲解CSS定位前，首先要搞清楚以下几个属性的真正含义和区别，如下：

A：相对定位(position: relative)：如果对某一个元素进行相对定位，它将出现在它所在的位置上，然后，可以通过设置垂直(或水平)位置(top,right,bottom,left四值)，让这个元素“相对于”它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留;
B：绝对定位(position: absolute)：绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框;
C：固定定位(position: fixed)：固定定位元素的位置总以视窗左上角定位;注：IE6不兼容此属性;
D：static ：没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级;

A：position: relative： 被相对定位元素不会脱离文档流，它会参考自身静态位置的左上角，通过 top，right，bottom，left进行位置移动。注：相对定位层原有位置还会继续占用文档流;如下图：
红色区域被相对定位后，相对A点通过top:20px，left:15px进行位移，但相对定位层的原有位置还会继续保留;
B：position:absolute：被绝对定位元素会脱离文档流，且会选取自己最近的父级定位元素，通过 top，right，bottom，left进行位置移动。注：当父级position属性是static时，absolute位移定位置将以body的原点坐标进行计算;如下图：红色区域被绝对定位后，被定位层脱离文档流;如果A点层是 relative(或 absolute时，即红色区域的父级)，被定位层会以A点坐标通过top:20px，left:15px进行位移;当父级没有定位时，文档以body的原点坐标通过top:20px，left:15px进行位移;

问题一：
IE6本身不支持position: fixed属性，但可以通过hack的方法解决此问题，如下：
position: fixed;top: 0;left:0; /* 除ie6之外的浏览器执行此样式 */
_position:absolute:_top:expression( + 0 + “px”); /* 仅ie6执行此样式 */
问题二：
当绝对定位和相对定位配合使用时，在IE6下会产生一个奇偶BUG;当相对定位层的宽度值是奇数时，绝对定位层的位置是上右(或下右)时，在IE6 下右侧会出现1像素的间隙;反之当相对定位层的高度是奇数时，绝对定位层的位置是左下(或右下)时，在IE6的下方会出现1像素的间隙;所以当采用定位时，相对定位层尽量避免使用奇数数值;如果必须使用奇数值，可以通过HACK方法给IE6单独书写数值(如left:0px;_left:-1px;);
上面所说定位原理都是单独的使用方法，而在实际应用中我们总会使用一些特别的形式;即希望元素具有绝对定位特性的同时，又希望绝对定位的坐标原点可随意固定在网页的某一点上，当这个相对点随意移动时，绝对定位层可以随之改变位置，也就是绝对定位层可以随着网页移动;如果想实现这种定位方式，必须在这个绝对定位层的父级设置相对定位值，那么绝对定位层就会以父级的坐标原点为坐标起始原点;此方法在网页制作中使用的比较广泛，如下：
1. 滚动图的左右按钮(index_zuo,index_you)样式是绝对定位,它的父级(rollBox)样式是相对定位;
(pic)样式是绝对定位，它的父级(box)样式是相对定位;
诸如此类的实际应用还有很多，如下拉菜单，焦点图，轮播图和一些不规则的复杂结构都会用到此类定位方式;
由于市场的各类浏览器类型较多，对CSS定位的支持也略有不同，其中IE6的问题相对较多，需要根据不同情况进行不同的调试;
篇2：详解css定位与定位应用
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样，如果理清了定位的原理，那定位会让网页实现的更加完美。
定位的定义：
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
定位的原理：
可以位移的元素 （相对定位）
在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：
[next]
我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px，
而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老C。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。
并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的。由此可推，当TRBL为负值时位移的方向是外放的。在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。关于位移方位，可以延伸阅读怿飞的《由浅入深漫谈margin属性（一）》
可以在任意一个位置的元素 （绝对定位）
如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：
上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。[next]
被关联的绝对定位
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的
篇3：CSS Hack详解
CSS hack由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果， 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
摘要：
在我们制作页面时CSS hack由于不同的浏览器，比如Internet Explorer,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack
注意：尽可能减少对CSS Hack的使用。
原理：
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
实际应用：
选择器：
语法：
selector{ sRules }
说明：
选择不同的浏览器及版本
通常如未作特别说明，所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
简单列举几个：
代码如下: * html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;}/* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
:root .test {background-color:green;} /* For IE9 and Opera */
***@media screen and (-webkit-min-device-pixel-ratio:0) {.test {color:gray;}} /* For Chrome and Safari */
@-moz-document url-prdfix {.test {color:#fff}} /* For Forefox */
* 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。
IE条件Hack:
语法：
代码如下: ? IE ?]>
HTML代码块

取值：

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：
指定是否IE或IE某个版本。关键字：空
大于：
选择大于指定版本的IE版本。关键字：gt（greater than）