【CSS】绝对定位、相对定位、固定定位、vertical-align

最新推荐文章于 2022-11-23 16:24:04 发布

心之所及，皆是欢笑

最新推荐文章于 2022-11-23 16:24:04 发布

阅读量654

点赞数

分类专栏：前端文章标签：绝对定位相对定位固定定位 vertical-align

本文链接：https://blog.csdn.net/u013087359/article/details/105743811

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.定位

1.介绍

作用
- 通过定位可以移动元素位置
使用场景
- 当页面中出现盒子压盒子的效果时，推荐使用定位。
特点
- 定位体现的是元素之间的层级关系

2.绝对定位

语法
- position:absolute
介绍
- 如果一个元素设置了绝对定位，如果该元素的父元素设置了静态定位或者没有定位，那么当前子元素是以浏览器可视区域(window)左上角为参照进行位置移动
- 如果一个子元素设置了绝对定位，如果该子元素的父元素设置了除静态定位以外的其他定位，那么当前绝对定位的子元素的左上外边距(盒子模型的左上角)会以父元素左上角(父元素内边框，即内容区域[padding+宽高]左上角)为参照进行位置移动
- 父元素的margin、boder、padding、width、height都不会影响子元素的偏移位置
- 子元素的margin-left、margin-top会影响子元素偏移的位置、其他都不会影响子元素的偏移位置
特点
- 绝对定位的元素脱标不占位置
- 绝对定位可以把元素转换成行内块
- 绝对定位元素脱离父容器，如果设置宽高百分比，只会相对于window宽高百分比(不包括滚动卷去的距离)

3.相对定位

语法
- position:relative
介绍
- 相对定位元素是以元素自己原来的位置为参照设置定位
特点
- 相对定位元素占用位置,当移动后，原来位置会出现空白(占用原来的位置)
- 相对定位元素不能转换显示模式
- 一般情况下设置子绝父相(父容器设置相对定位，子元素设置绝对定位)

4.固定定位

语法
- position:relative
介绍
- 固定定位的元素始终是以浏览器可视区域(window)为参照设置定位(即相对于浏览器可视区域不动)
特点
- 固定定位元素脱标不占用位置
- 固定定位元素会换行为行内块元素
- 固定定位元素脱离父容器，如果设置宽高百分比，只会相对于window宽高百分比(不包括滚动卷去的距离)

5.z-index

语法
- z-index:auto|number
  - auto:遵循父元素的z-index
  - number:无单位的整数值，可设为负数
介绍
- 指定定位元素的层级(除static定位外的定位才有层级关系)
- 当z-index值相同的情况下，那么最后的定位元素层级要高于前面的定位元素。【后来居上原则】
- 当z-index值不同的情况下，那么z-index值越大该元素的层级越高。
- 如果元素的父元设置了z-index值,那么父元素的z-index值越大，那么该元素的层级越高
- 层级比较：负数<标准流元素<正数（z-index越大层数越高）

6. 注意

当定位元素没有设置top、right、bottom、left时，该元素不会移动
当定位元素只设置了top或bottom中的一个值，只有垂直方向移动，水平方向不会移动
当定位元素只设置了right或left中的一个值，只有水平方向移动，垂直方向不会移动
当定位元素同时设置了top和bottom，那么只有top值有效
当定位元素同时设置了right和left，那么只有left值有效
垂直方向的方位移动属性与水平方向的方位移动属性不冲突(如：top与left同时用,bottom与left同时用)

7. 定位盒子居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 300px;
            background-color: pink;
            position: relative; /* 父元素设置相对定位，主要为了让子元素提供参造物 */
        }
 
        .one {
            width: 300px;
            height: 50px;
            background-color: green;
            position: absolute; /* 子元素设置绝对定位 */
            /*盒子水平居中*/
            left: 50%; /* 往右移动父元素的50%宽度 */
            margin-left: -150px; /* 往回移动子元素一半的宽度 */
            /*盒子垂直居中*/
            top: 50%; /* 往下移动父元素的50%高度 */
            margin-top: -25px; /* 往回移动子元素一半的高度 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
    </div>
</body>
</html>

8.定位方位属性与外边距方位属性同时使用

介绍
- 定位方位属性值移动的距离可以与外边距方位属性值移动距离叠加
注意
- left只能与margin-left横向距离叠加(left与margin-right同时用时margin-right无效)
- right只能与margin-right横向距离叠加(right与margin-left同时用时margin-left无效)
- top只能与margin-top纵向距离叠加(top与margin-bottom同时用时margin-bottom无效)
- bottom只能与margin-bottom纵向距离叠加(botto,与margin-top同时用时margin-top无效)
- 当left和right都没设值时,只有margin-left有效(因为定位元素默认以左上角定位)
- 当top和bottom都没设值时,只有margin-top有效(因为定位元素默认以左上角定位)

二.垂直对齐vertical-align

1.介绍

设置元素的垂直对齐方式，使该元素与其他元素内容对齐
图片底部默认与文字的基线对齐(文字底部与图片不对齐，文字稍微偏下)，如果图片比文字高，会把文字强制移动往下移动
垂直对齐只能用于图片、表格的tr和td

2.语法

vertical-align:baseline|top|middle|bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img {
            /*使图片与文字的中部对齐*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <span>文字</span>
    <img src="icon_0.gif">
</body>
</html>

心之所及，皆是欢笑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS】绝对定位、相对定位、固定定位、vertical-align

一.定位1.介绍2.绝对定位3.相对定位4.固定定位5.z-index6. 注意7. 定位盒子居中8.定位方位属性与外边距方位属性同时使用二.垂直对齐vertical-align1.介绍2.语法一.定位1.介绍作用通过定位可以移动元素位置使用场景当页面中出现盒子压盒子的效果时，推荐使用定位。特点定位体现的是元素之间的层级关系2.绝对定位语法...
复制链接

扫一扫