CSS-定位

最新推荐文章于 2024-06-13 18:31:56 发布

MSL7141

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量129

点赞数

分类专栏：前端基础文章标签： css html vue.js

本文链接：https://blog.csdn.net/MSL7141/article/details/120453083

版权

前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式

定位模式决定元素的定位方式，通过CSS的position属性设置，其值分为

边偏移

边偏移就是定位的盒子移动到最终位置，有top\bottom\left\right4个属性。

1 静态定位static

静态定位的元素是标准流默认的定位方式，即无定位，。

基本语法：

选择器:{position:static;}

2相对定位relative

相对定位是元素在移动位置的时候，是相对于它用来的位置而已。

基本语法：

选择器：{position:relative;}

相对于原来的位置进行移动，

原来在标准的位置来回移动，原来的标准流位置继续占用，后面的盒子仍然以标准流的方式对待其。

<!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>相对定位</title>
    <style>
      .box1 {
          position:relative;
          top:300px;
          right: 300px;
          left: 300px;
          width: 200px;
          height: 300px;
          background-color:red;

          
}  
.box2  {
    width: 200px;
          height: 300px;
          background-color:yellowgreen;
}
    </style>
    
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

3 绝对定位absolute

绝对定位是元素在移动的时候相对于祖先元素而已的。

基本语法：

选择器：{position：absolute}

如果没有祖先元素或祖先元素没有定位时，以浏览器为准定位。

  position:absolute;
    top:100px;
    left:100px;

如果祖先元素有定位（相对、绝对、固定），则以最近一级的定位祖先元素为参考移动位置。

.box2  {
    position:absolute;
    top:100px;
    left:100px;
    width: 200px;
          height: 300px;
          background-color:yellowgreen;
}
.box2 .son {
    position:absolute;
    top:20px;
    right:20px;
    width: 50px;
    height: 50px;
    background-color:black;


}

绝对定位不再占有原来的位置。

子绝父相

子级是绝对定位的花，父级要用相对定位。

子爵对定位:不会占有位置，可以放到盒子里面的任何一个地方，不会影响其他兄弟的盒子。

父盒子需要加定位限制子盒子在父盒子内显示。

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中。

.box {
            position:absolute;
            /* left偏移50% */
            left:50%;
            /* margin为宽度一半的负值 */
            margin-left:-100px;
            width: 200px;
            height: 300px;

        }

4固定定位fixed

固定定位是固定于浏览器可视区的位置，可以使得在浏览器页面滚动时元素的位置不变。

基本语法：

选择器：{position:fixed;}

以浏览器的可视窗口作为浏览器可视区为参考移动，与父级元素没有任何关系，不随滚动条滚动，固定定位不占有原来的位置。

.catton {
            position:fixed;
            bottom:0;
            right:0;
           
        }

固定在版心右侧位置。

      .background {
            width: 400px;
            height: 500px;
            background-color: pink;
            margin:0 auto;
        }
        .edict {
            position:fixed;
            /* 固定定位的盒子左移50% */
            left:200px ;
            /* 固定定位的盒子左边缘宽度占版面一半多 */
            margin-left:205px;
            width: 50px;
            height: 100px;
            background-color: skyblue;
        }
<!-- 固定定位先行 -->
    <div class="edict"> </div>
    <div class="background"> </div

5粘性定位（sticky）

相对定位和固定定位的组合

基本语法：

选择器：{position：sticky；top/left/right/bottom10px;}

以浏览器的可视窗口为参照点移动元素（固定定位）。粘性定位为占有原先的位置（相对定位）

必须添加top/left/right/bottom其中一个才有效。

.sticcky1 {
            position:sticky;
            top:10px;
            width: 20px;
            height: 200px;
            background-color: black;
        }

定位小结：

定位的叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的前后次序。

基本语法

选择器：{z-index:正整数/负整数/auto/0;}

数值越大，盒子越靠上，值相同时，按书写顺序，后来者居上。

数值不能加单位，只有定位的盒子才有z-index属性

定位拓展

特殊性:

行内元素添加绝对或者固定定位时，可以直接设定高度和宽度；

块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认的大小是内容的大小。

脱标的盒子不会触发外边距塌陷。

浮动的元素不会压住下面标准流的文字。

绝对定位会压住下面标准流的所有的内容。

MSL7141

关注

0
点赞
踩
0

收藏

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

定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移定位模式定位模式决定元素的定位方式，通过CSS的position属性设置，其值分为边偏移边偏移就是定位的盒子移动到最终位置，有top\bottom\left\right4个属性。1 静态定位static静态定位的元素是标准流默认的定位方式，即无定位，。基本语法：选择器:{position:static;}2相对定位relative相对定位是元素在移动位置的.
复制链接

扫一扫