css：position定位属性及实例应用总结-css教程-PHP中文网

首页

web前端

css教程

css：position定位属性及实例应用总结

伊谢尔伦

Jun 06, 2017 am 11:14 AM

position定位属性

css中position是一个非常的重要的属性，它有absolute（绝对定位）、relative（相对定位）、static（静态定位，默认值）、fixed（固定定位）四种。通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性。目前几乎所有主流的浏览器都支持position属性，下面的文章我们就来说说css中position定位属性和其应用。

可以先学习php中文网相关的免费课程

1. 学习《HTML+CSS基础入门教程》中的 CSS基础教程之定位章节

2. 观看《弹指间学会CSS视频教程》中 CSS定位视频教程

position定位相关应用

1. 深入了解css中的position属性

绝对定位会彻底从文档流中拿出来，元素之前占据的空间也被回收啦。绝对定位元素的定位依靠其定位上下文。
需要注意的是：这里写过绝对定位可以将行内元素变为块级元素的表现形式。但是确定就是一旦将行内元素进行绝对定位后，该元素的位置不好掌握，（原因：如果该元素没有设置内外边距，且前后左右也没有绝对定位元素，那么该元素会暂时停留在自己原来的位置，但是如果该元素设置了外边距，那么该元素会暂时停留在距原来位置一个外边距的距离。如果他前后左右都是设置了绝对定位的元素，那么该元素会寻找最上面一个不是绝对定位的元素下面。<有没有后悔听原因啦>）所以，一点那设置了绝对定位需要马上为该元素进行top、left定位。

2. 解析css的position里的relative和absolute的区别

position有以下属性：static、inherit、fixed、absolute、relative
前三个好理解好区分：
static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
nherit：从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。（即滚动浏览器的时候，元素永远固定显示在窗口可视区的某个位置）。

3. CSS定位position使用介绍

absolute和fixed特点：

a、块级元素的宽度在未定义时不再为100%，而是根据内容自动调整

b、在不定义z-index的情况下，absoulte元素会覆盖在其他元素上。

c、它会脱离正常的文档流，不再占据空间，类似于浮动后的效果

absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position，absolute将相对于整个html文档进行绝对定位。

4.使用CSS中position属性的定位方法说明

一个 static 定位的元素会忽略所有 top，right，bottom，left 以及 z-index 属性所声明的值。为了让你的元素能使用这五个属性，你需要先为它的 position 属性应用这三个值的其中之一： absolute，relative，fixed，position 值为 inherit 的元素和其他所有属性的继承值一样，元素会继承父元素的 position 值。

5. css中position定位的四种方法总结

脱离标准文档流

　　特点：（1）如果这个元素没有父元素，那么将来top、left、right、bottom是相对于浏览器窗口来定位的

　　　　　（2）如果绝对定位的元素有父元素，但父元素没有相对定位，那么这个时候top、left、right、bottom还是相对于浏览窗口来定位的

　　　　　（3）如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础

　　　　　（4）绝对定位之后的元素在页面上不会占据位置

6. CSS的position定位和float浮动

a.假如有一个默认100%宽度的p,一旦加上absolute绝对定位，该元素立马inline-block化，默认宽度就会自适应元素内部宽度，会导致页面的宽高塌陷。

b.由于absolute绝对定位的灵活性，对于普通的页面布局，有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦

相关问答

1. 不用position：absolute怎么实现类似的功能

2. 移动端position:fixed;的兼容问题