9-CSS布局之定位布局

最新推荐文章于 2024-01-05 16:50:50 发布

℡☞

最新推荐文章于 2024-01-05 16:50:50 发布

阅读量69

点赞数 1

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/qq_43975332/article/details/119796698

版权

HTML与CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

1 静态定位

默认定位方式，意味着将一个元素定位在默认文档流中

position:static

2 相对定位

相对于其原本的位置来定位

position: relative;

注意

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

3 绝对定位

是相对于最近的且不是static定位的父元素来定位

position: absolute;

参考点

默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
如果一个绝对定位的元素有祖先元素并且是定位流（除了static）, 那么这个绝对定位的元素就会以定位流的祖先元素作为参考点。
如果一个绝对定位的元素有多个定位流的祖先元素，那么选择离该元素最近的祖先元素（就近原则）

注意

绝对定位是脱离标准流的
在绝对定位中是区分块级元素/行内元素/行内块级元素
一个绝对定位的元素会忽略祖先元素的padding

子绝父相设置水平垂直居中

只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

.div1{
    width: 400px;
    height: 300px;
    background-color: red;
    /* 相对定位 */
    position: relative;
}
.div2{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	/* 绝对定位 */
	position: absolute;
	/* 绝对定位水平居中 */
	left: 50%;
	top: 50%;
	margin-left:-50px;
	margin-top: -50px;
  
}
<div class="div1">
	<div class="div2"></div>
</div>

在这里插入图片描述

4 固定定位

是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动

position: fixed;

注意

固定定位的元素是脱离标准流的, 不会占用标准流中的空间
固定定位不区分行内/块级/行内块级

5 粘滞定位

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位

粘滞定位可以在元素到达某个位置时将其固定

position: sticky;

注意

粘滞定位不脱离文档流
父元素不能overflow:hidden或者overflow:auto属性
父元素的高度不能低于sticky元素的高度
必须指定top、bottom、left、right4个值之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 设置父容器的样式 */
        .container{
            width: 726px;
            height: 8888px;
            /* background-color: gray; */
            margin: 0 auto;
        }
        /* 设置导航栏的粘滞定位 */
        .container ul{
            position: sticky;
            top: 0;
        }
        /* 设置一级菜单的样式 */
        .container ul li{
            /* 清除样式 */
            list-style: none;
            /* 清除浮动 */
            float: left;
            width: 120px;
            height: 50px;
            background-color: royalblue;
            /* 文本居中 */
            text-align: center;
            /* 行高 */
            line-height: 50px;
            /* 右边框 */
            border-right: 1px solid white;
            /* 相对定位 */
            position: relative;

        }
        /* 设置a标签的样式 */
        .container ul li a{
            color: white;
            /* 清除下划线 */
            text-decoration: none;
        }
        /* 一级菜单hover颜色 */
        .container ul li:hover{
            background-color: rgba(65,105,225,0.5);
        }
        /* 二级菜单默认隐藏 */
        .container ul li ul{
            /* 隐藏 */
            display: none;
            /* 绝对定位 */
            position: absolute;
            top: 50px;
        }
        /*一级菜单hover时显示二级菜单 */
        .container ul li:hover ul{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 占位div -->
    <div class="header" style="height: 100px;"></div>
    <div class="container">
        <!-- 一级菜单 -->
        <ul>
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">居家生活</a>
                <!-- 二级菜单 -->
                <ul>
                    <li><a href="">栏目1</a></li>
                    <li><a href="">栏目2</a></li>
                    <li><a href="">栏目3</a></li>
                </ul>
            </li>
            <li><a href="#">服饰鞋包</a></li>
            <li><a href="#">美食酒水</a></li>
            <li><a href="#">个护清洁</a></li>
            <li><a href="#">运动旅行</a></li>
        </ul>
        <!-- 内容区 -->
        <div class="content">
            <div>我是第1个div</div>
            <div>我是第2个div</div>
            <div>我是第3个div</div>
            <div>我是第4个div</div>
            <div>我是第5个div</div>
            <div>我是第6个div</div>
            <div>我是第7个div</div>
            <div>我是第8个div</div>
            <div>我是第9个div</div>
            <div>我是第10个div</div>
            <div>我是第11个div</div>
            <div>我是第12个div</div>
            <div>我是第13个div</div>
            <div>我是第14个div</div>
            <div>我是第15个div</div>
            <div>我是第16个div</div>
            <div>我是第17个div</div>
            <div>我是第18个div</div>
            <div>我是第19个div</div>
            <div>我是第20个div</div>
            <div>我是第21个div</div>
            <div>我是第22个div</div>
            <div>我是第23个div</div>
            <div>我是第24个div</div>
            <div>我是第25个div</div>
            <div>我是第26个div</div>
            <div>我是第27个div</div>
            <div>我是第28个div</div>
            <div>我是第29个div</div>
            <div>我是第30个div</div>
            <div>我是第31个div</div>
            <div>我是第32个div</div>
            <div>我是第33个div</div>
            <div>我是第34个div</div>
            <div>我是第35个div</div>
            <div>我是第36个div</div>
            <div>我是第37个div</div>
            <div>我是第38个div</div>
            <div>我是第39个div</div>
            <div>我是第40个div</div>
            <div>我是第41个div</div>
            <div>我是第42个div</div>
            <div>我是第43个div</div>
            <div>我是第44个div</div>
            <div>我是第45个div</div>
            <div>我是第46个div</div>
            <div>我是第47个div</div>
            <div>我是第48个div</div>
            <div>我是第49个div</div>
            <div>我是第50个div</div>
            <div>我是第51个div</div>
            <div>我是第52个div</div>
            <div>我是第53个div</div>
            <div>我是第54个div</div>
            <div>我是第55个div</div>
            <div>我是第56个div</div>
            <div>我是第57个div</div>
            <div>我是第58个div</div>
            <div>我是第59个div</div>
            <div>我是第60个div</div>
            <div>我是第61个div</div>
            <div>我是第62个div</div>
            <div>我是第63个div</div>
            <div>我是第64个div</div>
            <div>我是第65个div</div>
            <div>我是第66个div</div>
            <div>我是第67个div</div>
            <div>我是第68个div</div>
            <div>我是第69个div</div>
            <div>我是第70个div</div>
            <div>我是第71个div</div>
            <div>我是第72个div</div>
            <div>我是第73个div</div>
            <div>我是第74个div</div>
            <div>我是第75个div</div>
            <div>我是第76个div</div>
            <div>我是第77个div</div>
            <div>我是第78个div</div>
            <div>我是第79个div</div>
            <div>我是第80个div</div>
            <div>我是第81个div</div>
            <div>我是第82个div</div>
            <div>我是第83个div</div>
            <div>我是第84个div</div>
            <div>我是第85个div</div>
            <div>我是第86个div</div>
            <div>我是第87个div</div>
            <div>我是第88个div</div>
            <div>我是第89个div</div>
            <div>我是第90个div</div>
            <div>我是第91个div</div>
            <div>我是第92个div</div>
            <div>我是第93个div</div>
            <div>我是第94个div</div>
            <div>我是第95个div</div>
            <div>我是第96个div</div>
            <div>我是第97个div</div>
            <div>我是第98个div</div>
            <div>我是第99个div</div>
            <div>我是第100个div</div>
        </div>
    </div>
</body>
</html>

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认z-index为0

注意

从父现象

如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 谁的父元素的z-index属性比较大谁就会显示在上面

```

在这里插入图片描述

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认z-index为0

注意

从父现象

如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 谁的父元素的z-index属性比较大谁就会显示在上面

℡☞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9-CSS布局之定位布局

文章目录1 静态定位2 相对定位注意3 绝对定位参考点注意子绝父相设置水平垂直居中4 固定定位注意5 粘滞定位注意z-index注意z-index注意1 静态定位默认定位方式，意味着将一个元素定位在默认文档流中position:static2 相对定位相对于其原本的位置来定位position: relative;注意相对定位是不脱离标准流的, 会继续在标准流中占用一份空间在相对定位中同一个方向上的定位属性只能使用一个由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行
复制链接

扫一扫

专栏目录