CSS初入门：网页布局之定位布局

持久的棒棒君

已于 2023-07-04 19:09:56 修改

阅读量724

点赞数

分类专栏：大杂烩文章标签： css css3 html

于 2022-03-18 12:16:24 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/123566909

版权

大杂烩专栏收录该内容

259 篇文章 1 订阅

订阅专栏

文章目录

定位布局

定位布局

position 属性规定应用于元素的定位方法的类型

有五个不同的位置值：
static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

1、静态定位 static

格式：position: static;
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位

2、相对定位 relative

格式：position: relative;
position: relative; 的元素相对于其正常位置进行定位。（这里的正常位置也可以理解为在当前移动之前所处的位置）
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

特点：

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

在这里插入图片描述

3、绝对定位 absolute

格式：position: absolute;

什么是祖先元素？

<div>
     <span>
           <i></i>
     </span>
</div>
<!--i的祖先元素是div,父元素是span-->

绝对定位参考点
1、默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body节点作为参考点
在这里插入图片描述
2、如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。

只要是这个绝对定位元素的祖先元素都可以
定位流是指绝对定位/相对定位/固定定位
定位流中只有静态定位时不行

3、如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。（就近原则）

注意点：
1、绝对定位脱离文档流，不在标准流中
2、绝对定位的元素不区分块级元素、行内元素、行内块级元素（绝对定位的元素基本就成了行内块级元素的效果，不过因为它脱离了文档流，所以不会像行内块级元素那样占用文档位置）
3、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点
4、一个绝对定位的元素会忽略祖先元素的padding

关于子绝父相

相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

什么是子绝父相
子元素用绝对定位, 父元素用相对定位

绝对定位实现水平居中

第一步：设置绝对定位元素的left:50%;
第二步：再设置绝对定位元素的 margin-left: 元素宽度的一半px;

4、固定定位fixed

格式：position: fixed;
固定定位的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。和背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动，top、right、bottom 和 left 属性用于定位此元素。

注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
3.固定定位的元素不会在页面中通常应放置的位置上留出空隙。

5、粘滞定位sticky

格式：position: sticky;
特点：
1、结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
2、元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
3、设置了position: sticky的元素在跨越阈值前属于相对定位，也就不脱离文档流，但跨越阈值后，就变成了固定定位，就脱离文档流了。
4、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
场景：打开京东官网
在这里插入图片描述
一直将网页往下滑，滑到一定位置时可以发现输入款固定在了固定位置，如下：

粘滞定位使用条件：
（1）父元素不能overflow:hidden或者overflow:auto属性。
（2）必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
（3）父元素的高度不能低于sticky元素的高度
（4）sticky元素仅在其父元素内生效

例如：

<!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>
       .father{
            width: 300px;
            height: 200px;
            border: 3px solid black;
            overflow: scroll;
           
       }

       /*给input设置为粘滞定位，当它移动到指定位置时固定不动*/
       .sticky{
            position:sticky;
            top: 5px;
       }
    </style>
</head>
<body>
    <div class="father">
        <div>
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
        </div>
        <input type="text" class="sticky" value="这是个粘滞...">
        <div>
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试
        </div>
    </div>

</body>
</html>

在这里插入图片描述

6、关于Z-index属性

1、什么是z-index属性?
默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的
2、默认情况下定位流的元素会盖住标准流的元素
3、默认情况下定位流的元素后面编写的会盖住前面编写的
4、如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面。

注意点—从父现象
1、如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
2、如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

持久的棒棒君

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS初入门：网页布局之定位布局

定位position 属性规定应用于元素的定位方法的类型有五个不同的位置值：staticrelativefixedabsolutesticky元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。静态定位 static格式：position: static;HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受
复制链接

扫一扫