CSS定位

最新推荐文章于 2022-05-26 10:03:57 发布

戳戳的船长

最新推荐文章于 2022-05-26 10:03:57 发布

阅读量64

点赞数 1

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_45765588/article/details/119734157

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS定位，包括相对定位、绝对定位、固定定位和粘性定位的概念及使用。通过实例展示了各种定位方式如何影响元素在页面上的位置，强调了定位模式和边偏移的重要性，并讨论了定位的叠放次序和一些特殊特性。此外，还介绍了如何实现绝对定位的水平垂直居中布局。

摘要由CSDN通过智能技术生成

前言

再不学没饭吃了~

一、定位

让盒子固定在页面某个位置，或者自由的在某个盒子内移动

示例：在这里插入图片描述

二、定位组成：定位=定位模式+边偏移

1.定位模式决定定位方式
2.边偏移决定最终位置

top bottom left wright

1 相对定位（relative）

相对于自己原来位置移动
不脱标，继续保留原来位置

2 绝对定位（absolute）

相对于父亲移动
注意：父亲必须定位，否则相对于页面移动
定位加一个 position:relative;


<title>绝对定位</title>
    <style>
        .yeye {
            position: relative;
            width: 1000px;
            height: 1000px;
            background-color: blue;

        }

        .father {
            /* position: relative; */
            width: 500px;
            height: 500px;
            background-color: yellow;

        }

        .son {
            position: absolute;
            bottom: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>

    </div>


</body>

注意：盒子相对于最近的带定位的一个盒子移动

在这里插入图片描述

优点：不保留原来位置（人走财空）

3 子绝父相

由来

子级绝对定位，可放到父盒子里面任一个地方，不影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此只能为相对定位

总结：父级需要占有位置，为相对定位，子盒子不需要占有位置，为绝对定位

案例

<ul>
                <li>
                    <em>
                        <img src="images/hot.png" alt="">
                    </em>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>

                    <div class="info">

                        <span>高级</span> • 1125人在学习
                    </div>
                </li>

.box-bd ul li{
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    margin-bottom: 15px;
    margin-right: 15px;
    background-color: #fff;

}

4 固定定位 fixed

页面在走，元素不动
在这里插入图片描述
特点：

以浏览器的可视窗口为参照点移动元素，即：不管页面窗口大小，他都完全出现在页面中
和父元素无关
不随滚动条移动
固定定位不占有原来位置

固定定位小技巧（算法）

<title>固定定位小技巧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            top: 20px;
            /* 1. 走浏览器宽度的一半*/
            left: 50%;
            /* 2.利用margin 走版心盒子宽度的一半距离 */
            margin-left: 404px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

5 粘性定位（了解）

语法

选择器{ position: sticky; top: 10px; }

相对定位和固定定位的混合（兼容性差,IE不支持）

三、定位的叠放次序

语法

z-index
选择器{
	z-index: ;
	/*
	数值越大，盒子越靠上
	数字后不可以加单位
	*/
 }

四、定位的拓展

绝对定位水平垂直居中

margin: 0 auto;
无法实现绝对定位水平垂直居中
在这里插入图片描述

算法：

left:50%;让盒子的左侧移动到父级元素的水平中心位置
margin-left:-100px;让盒子向左移动自身宽度的一半

    <title>绝对定位水平垂直居中</title>
    <style>
        .box {
            position: absolute;
            top: 20px;
            /* 1.让盒子左侧一道父级元素的水平中心位置 */
            left: 50%;
            /* 2.然盒子左侧移动自身宽度的一半 */
            margin-left: -150px;
            width: 300px;
            height: 200px;
            background-color: pink;
            /* margin: 0 auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>