网站首页编程语言正文

CSS元素定位

作者：梁峯更新时间： 2022-11-09 编程语言

定位

position

定位是一种更高级的布局手段

通过定位可以可以将元素摆放到页面的任意位置

文章目录

定位
- 相对定位
- 绝对定位
- 固定定位
- 粘滞定位
- 绝对元素的定位
- 元素的层级（z-index）

position:static;	/*默认值，元素是静止的没有开启定位*/
position:relative;	/*开启元素的相对定位*/
position:absolute;	/*开启元素的绝对定位*/
position:fixed;		/*开启元素的固定定位*/
position:static;	/*开启元素的粘滞定位*/

相对定位

当position属性值为relative时则开启了元素的相对定位
position:relative;
left:100px;
top:-100px;

元素开启相对定位以后，如果不设置偏移元素不会发生任何的变化
相对定位是参照与元素在文档流中的位置进行定位
相对定位会提升元素的层级
相对定位不会使元素脱离文档流
相对定位不会改变元素的性质（块还是块，行内还是行内）

偏移量（offset）：通过偏移量设置元素的位置
- right/left
  - 定位元素和定位位置的左/右侧距离
  - 通常情况下我们只会使用其中之一
  - left/right越大元素越向右/左移动
- top/bottom
  - 定位元素和定位位置上/下边的距离
  - 通常情况下我们只会使用其中之一
  - top/bottom越大元素越向下/上移动

绝对定位

当position属性值为absolute时则开启了元素的相对定位
position:absolute;
left:100px;
top:200px;

开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
开启绝对定位后，元素定位会从文档流中脱离
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
绝对定位会使元素提升一个层级
绝对定位元素时先对于其包含快进行定位的

包含块（containing blok）
- 绝对定位的包含块
  - 离它最近的开启了定位的祖先元素（非pasition:static;）
  - 若所有的祖先元素都没有开启定位则根元素就是它的包含块
- <html>(根元素、初始包含块)

固定定位

当position属性值为fixed时则开启了元素的相对定位
position:fixed;
left:100px;
top:200px;

也是一种绝对定位，大部分特点与绝对定位一样
不同点：
- 固定定位永远参考浏览器的视口进行定位
- 不会随网页的滚动条的滚动条滚动而滚动

粘滞定位

当position属性值为sticky时则开启了元素的相对定位
position:sticky;
top:10px;//滚动后固定在距离top10px的位置
IE不行

和相对定位基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

绝对元素的定位

水平布局

left+marrgin-left+border-left+padding-left+width+padding-right+border-right+marrgin-right+right=包含块内容区的宽度

当我们开启了绝对定位后:

水平方向的布局等式就需要添加left和right两个值
- 此时规则和之前一样只是多添加了两个值
- 当发生过度约束：
  - 如果九个值中没有auto则自动调整right值以使等式满足
  - 如果有auto，则自动调整auto的值以使等式满足
- 可以设置auto的值
  - margin、width、left、right
- 因为left和right的默认值使auto，则当等式不满足切为默认值时，会自动调整这两个值
auto优先级：偏移量>宽高>外边距

垂直方向上布局的等式也必须满足

top+margin-top+boder-top+padding-top+height+padding-bottom+boder-bottom+margin-bottom+bottom=包含块的高度

.box{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}/*在包含块中垂直、水平居中*/

元素的层级（z-index）

对于开启了定位元素，可以通过z-index属性来指定元素的层级

z-index需要一个整体作为参数，值越大越苏的层级越高，越优先显示

如果元素层级一样，则优先显示（结构上HTML）靠下的元素
祖先的元素层级再高也不会盖住后代元素

原文链接：https://blog.csdn.net/m0_61219786/article/details/124484641

上一篇：css实现div盒子旋转
下一篇：v-html解析出的图片添加点击事件，并获取图片url

网站首页 编程语言 正文

CSS元素定位

定位

文章目录

相对定位

绝对定位

固定定位

粘滞定位

绝对元素的定位

元素的层级（z-index）

相关推荐

网站首页编程语言正文