CSS初识-定位Position

最新推荐文章于 2022-11-27 16:40:20 发布

小小鸟008

最新推荐文章于 2022-11-27 16:40:20 发布

阅读量93

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_36412715/article/details/83089101

版权

前端专栏收录该内容

35 篇文章 3 订阅

订阅专栏

文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素一行，行内元素在一行之内从左到右，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

定位

我们可以使用css的position属性来设置元素的定位类型，position的设置项如下：

relative 相对定位，占位置，相对自身原位置进行偏移。
absolute 绝对定位，不占位置，漂浮在文档流的上方，相对于上一个设置了定位的父元素来进行定位，如果找不到，则相当于body元素进行定位。
fixed 固定定位，不占位置，漂浮在文档流的上方，相对于浏览器窗口进行定位。
static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或不设置定位属性。
inherit从父元素继承position属性的值。

定位元素的偏移

定位的元素还需要用left、right、top或bottom来设置相对于参照元素的偏移值。

定位元素层级

定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定位</title>
    <style>
		.fix {
            width: 200px;
            height: 300px;
            background-color: pink;
			position:fixed;
			left:0;
			bottom:0;
        }
        .sup {
            width: 180px;
            height: 260px;
            background-color: orange;
			position: relative;  <!--父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局-->

        }
		.supBrother{
			width: 280px;
            height: 560px;
            background-color: green;
		}
        .sub {
            width: 50px;
            height: 80px;
            background-color: red;
			position: absolute;
            left: calc(50% - 25px);
			<!--50%指的是视口宽度的50%，calc(50% - 25px);指比视口宽度的50%少25px.这意味着浏览器中的值可以更加灵活，能够响应视口的改变。
			我们能够给元素设定一个高度为视口的高度减去一个绝对值，它将随视口的改变进行调节。-->
            right: 0;
            bottom: 0;
            top: calc(50% - 40px);<!--50%指的是视口高度的50%-->
        }
		.sub2{
			width: 100px;
            height: 80px;
            background-color: yellow;
		}
    </style>
</head>
<body>

<div class="sup">
    <div class="sub"></div>
    <h3>hhhhhhhhhhhh</h3>
	<div class="sub2"></div>       <!--绝对定位不占位置-->
</div>
<div class='supBrother'></div>     <!--相对定位占位置-->

<div class='fix'></div>            <!--固定定位不占位置-->

</body>
</html>