CSS:absolute绝对定位

position:absolute

特点：

脱离文档流（类似浮于页面上方的效果）；
位置：位置通过top、bottom、left、right设置（相对于非static 父元素）。默认位置正常文档流的位置。
无法撑开父容器，父容器发生高度坍塌（除了显式设置父容器高度，好像没得其他办法了，这个问题待定）
绝对元素的左右侧也不会被填充成margin.
看完所有的问题，float 和absolute 均是浮动元素，那他们有什么区别呢？
下面介绍第2点：位置

<!DOCTYPE html>
<html lang="en"><head><title>Document</title><style>#app {width: 500px;height: 500px;}.first {width: 100px;height: 100px;border: 1px solid green;}.second {position: absolute;width: 100px;height: 100px;border: 1px solid red;}</style>
</head><body><div id="app"><div class="first"></div><div class="second"></div> <!-- 绝对定位元素 --></div>
</body></html>

second (红色边框的方块)不设置left、right、top、bottom定位时，可以看出second位置就是正常文档流里的位置。元素布局稍作修改，如下：

<!DOCTYPE html>
<html lang="en"><head><title>Document</title><style>#app {width: 500px;height: 500px;}.first {display: inline-block; // 修改布局为行内元素width: 100px;height: 100px;border: 1px solid green;}.second {display: inline-block; // 修改布局为行业元素position: absolute;width: 100px;height: 100px;border: 1px solid red;}</style>
</head><body><div id="app"><div class="first"></div><div class="second"></div></div>
</body></html>

可以看到second 绝对定位元素仍然是正常文档流的位置，确认了第2点的正确性。
ok，再做个修改，来加深默认位置是正常文档流中的位置的理解

<!DOCTYPE html>
<html lang="en"><head><title>Document</title><style>#app {text-align: center; // 设置父容器内行内元素居中height: 500px;}.first {width: 100px;height: 100px;border: 1px solid green;}#app:after {position: absolute;content: "";display: inline-block; // 行内盒子width: 5px;height: 30px;background: green;}</style>
</head><body><div id="app"><div class="first">下面是绝对定位元素</div></div>
</body></html>

这里的绝对元素为什么在中央啊？不是应该在正常文档流后吗，就是在first正下方的，才对啊？实际上是放在first正下方的，但是由于此时父容器设置了text-align，所以最后位置从first正下方移到了中间。这下应该明白了。
那如果修改absolute 元素display:block，绝对元素位置会在哪里呢？

正如你所想，绝对元素跑到了first正下方。因为，text-align 只对行内元素起作用，对块级元素不起作用，所以绝对元素就没有居中放置。

CSS:absolute绝对定位相关推荐

CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
html中的绝对定位怎么写,CSS position绝对定位absolute relative
DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
CSS position: absolute 绝对定位精讲
本文要点 1. 绝对定位元素文档流: 2. 绝对定位元素定位参照对象: 3. 绝对定位元素的自动伸缩: 4. 绝对定位元素实现垂直居中: 绝对定位基本特征绝对定位的第一个特征在于会从文档流中脱离,不 ...
css中绝对定位中的left和top属性
<html><head><title>Absolute Position</title><style type = "text/css& ...
html图片中绝对定位,CSS中绝对定位
CSS中绝对定位 html> Position(定位) *{margin: 0px;padding: 0px;} body{background: url(images/2.jpg) no-re ...
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
static(静态定位),fixed(固定定位),relative(相对定位),absolute(绝对定位) Position的取值: static(静态定位) : 表示块保留在原本应该在的位置,不会 ...
absolute 绝对定位水平居中问题
position: absolute;绝对定位水平居中问题用CSS让元素居中显示并不是件很简单的事情-同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
css关于绝对定位的居中
一,css关于绝对定位的居中 .main { width: 600rpx; height: 280rpx; background: #fff; margin: auto; position: abso ...
[css] absolute的containing block（容器块）计算方式和正常流有什么区别？
[css] absolute的containing block(容器块)计算方式和正常流有什么区别? absolute会先向上找到第一个position不为static或者fixed的祖先元素,然后根 ...

CSS:absolute绝对定位

position:absolute

CSS:absolute绝对定位相关推荐

最新文章

热门文章