HTML css——定位

最新推荐文章于 2023-07-26 22:44:21 发布

33的史努比

最新推荐文章于 2023-07-26 22:44:21 发布

阅读量113

点赞数

分类专栏：前端入门学习文章标签： css html css3

本文链接：https://blog.csdn.net/coising/article/details/122577156

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的定位技术，包括position属性的static、relative、absolute和fixed四种模式。相对定位不脱离文档流，可通过left、right、top、bottom进行偏移。绝对定位和固定定位则会脱离文档流，其中绝对定位的包含块取决于最近的定位祖先，而固定定位始终相对于视口。此外，还讨论了定位元素的居中方法、重叠处理及z-index的使用。

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

定位

文章目录

定位

视觉格式化模型，大体上将盒子排列方式分为三种方式：

常规流
浮动 float
定位 position

定位：手动控制元素在包含块中的精准位置

涉及css属性：position

position属性

-默认值 static 静态定位（不定位）
-relative 相对定位
-absolute 绝对定位
-fixed 固定定位

一个元素，只要position的取值不是static 认为该元素是一个定位元素

定位元素会脱离文档流(相对元素除外)

一个脱离了文档流的元素：

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移

K可以通过四个css属性设置其位置

left
right
top
bottom

相对定位下盒子偏移不会对其他盒子造成任何影响

绝对定位

宽高为auto，适应内容
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则他的包含块为整个网页（初始化包含块）

固定定位

其他情况和绝对定位完全一样

包含块不同：固定为视口(浏览器的可视窗口)

定位下的居中

某个方向居中：

定宽（高）———— 水平方向定宽，垂直方向定高
将左右(上下) 距离设置为0。不然会自动计算距离
将左右(上下 )margin设置为auto

绝对定位和固定定位中，margin设为auto 吸收多余空间

多个定位元素重叠

堆叠上下文

设置z-index 通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数若为负数，则遇到常规流，浮动元素，会被其覆盖

举栗子 :奥运五环

<!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>
        .item{
            position: absolute;
            width: 70px;
            height: 70px;
            border: 5px solid;
            box-sizing: border-box;
            border-radius: 50%;

        }
        .circle1{
            left: 0;
            top: 0;
            border-color: blue;
        }
        .circle2{
            left: 70px;
            top: 0;
            border-color: black;

        }
        .circle3{
            left: 140px;
            top: 0;
            border-color: red;
        }

        .circle4{
            left: 35px;
            top: 40px;
            border-color: yellow;
        }
        .circle5{
            left: 105px;
            top: 40px;
            border-color: green;
        }
    </style>
</head>
<body>
    <div class="item circle1"></div>
    <div class="item circle2"></div>
    <div class="item circle3"></div>
    <div class="item circle4"></div>
    <div class="item circle5"></div>
</body>
</html>