CSS position: absolute 绝对定位精讲

本文要点
1. 绝对定位元素文档流；
2. 绝对定位元素定位参照对象；
3. 绝对定位元素的自动伸缩；
4. 绝对定位元素实现垂直居中；

绝对定位基本特征

绝对定位的第一个特征在于会从文档流中脱离，不受其他元素影响，定位是“绝对”的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的；

未使用定位：即元素在正常文档流当中

        <div class="frame"><div id="div1"></div><div id="div2"></div></div>

.frame {margin: 0 auto;margin-top: 50px;width: 400px;height: 300px;background-color: yellow;
}
#div1 {width: 100px;height: 50px;background-color: blue;
}
#div2 {width: 200px;height: 100px;background-color: green;
}

当我们给元素加上绝对定位的时候，元素会脱离当前文档流；

#div1 {position: absolute;
}

也就是说绝对定位的元素再文档流中没有位置，它从文档流中脱离了出来，后面的元素会填充掉它原来的位置；

绝对定位的第二个特征在于定位位置相对于第一个具有定位属性（即 position 为 relative 或者 absolute）的祖先元素；

#div1 {top: 30px;
}

当给绝对定位元素设置定位值时，该元素会延着DOM树向上查找，直到找到一个具有定位属性的祖先元素，则定位相对于该元素，在该例子中，由于其祖先元素都没有定位属性，则该绝对定位元素会相对于body体进行定位；如果给其父元素加上一个定位属性，则该绝对定位元素会相对于这个父元素；

.frame {position: relative;/* 或者 position: absolute; */
}

绝对定位高级特性

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width 设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小（注意：请牢记绝对定位元素的定位值是相对于第一个具有定位属性的祖先元素）；

#div1 {width: auto;left: 100;right: 50px;
}

根据第一个高级特性，我们可以衍生出第二个高级特性，由于绝对行为元素具有自动伸缩的功能，如果 width 值为 auto 此时如果我们设置 left 和 right 都为0，则该元素会填充满其相对的元素，如果此时我们将宽度设置为固定值，这是绝对定位元素会优先取 left 值作为定位标志（这个标准适用于从左向右读的文档流中，而在少数从右往左读的文档流中，则优先取 right）。如果这时我们将 margin 设置为 auto ，则绝对定位元素会呈现居中状态；

#div1 {margin: auto;width: 100px;left: 0;right: 0;
}

其实并不一定非要设置成0，在 margin: auto 下，只要 left 和 right 的值相等，且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现居中；如果其 left 超出了范围，那么会取 left 的值作为定位（从左向右的文档流）；/* 至于在范围能的值不等情况，大家可以自行测试一下 */

以上例子均在水平方向实现，那么垂直方向是怎么样的呢？其实垂直方向的作用效果是一样，垂直方向同样可以自动拉伸，同理我们也可以实现垂直方向上的自动居中；

#div1 {top: 0;bottom: 0;
}

和水平居中有一点不同的是，无论 top 和 bottom 的值设置为多少，只要相等，就可以垂直居中。

CSS position: absolute 绝对定位精讲相关推荐

css position:absolute 居中
css position:absolute 居中父级 div div{position: relative;} 自己 div div{position: absolute;left: 50%;top ...
CSS 有关Position = absolute (绝对定位是相对于谁而言)
css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位. 现在搞清楚了,不是相对于父元素,也不是相对于BODY. 而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元 ...
css position:absolute 父元素高度塌陷
问题在使用iSroll v4插件时,无法滚动到底部,从源码得知最大滚动位置由maxScrollY决定.从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapp ...
css position的父级,css position absolute 相对于父元素的设置方式
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角. 有时候我们需 ...
[CSS] position:absolute水平居中
最近听了周杰伦的<不爱我就拉倒>,感觉周董现在写歌有点任性,反正我就是要这样写,你们爱听不听.好吧,好吧,有才真的是可以为所欲为.不过,周董应该是少量的一些硬核的歌手,很多歌词都是拳拳到肉 ...
CSS position中绝对定位和相对定位的区别以及占位问题
!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS中的盒子 ...
css position:absolute 如何居中对齐
要写死宽度,就好弄了 position: absolute; left: 50%; width: 980px; margin-left: -490px; text-algin:center
css -- position : absolute 在不同的浏览器位置不同
注:自己遇到的一个css小问题. 测试工具:css .火狐浏览器 .谷歌浏览器 .极速谷歌浏览器问题:div中某标签使用绝对定位后在火狐.谷歌和极速谷歌中显示位置不同. 解决:在div中添加相对定位 ...
CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

CSS position: absolute 绝对定位精讲

CSS position: absolute 绝对定位精讲相关推荐

最新文章

热门文章