前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）(2)

当前位置:

首页 > Python基础教程 >

前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）(2)

1.1 相对定位的注意点

1 在相对定位中同一个方向上的定位属性只能使用一个

top/bottom (只能用一个)
left/right (只能用一个)

2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间，相对原来的位置定位，还占据原来的位置 3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的 4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局，即给相对定位的标签设置margin或padding，是以该标签原来的位置为基础来进行偏移的

2.绝对定位

绝对定位就是相对于body或者某个定位流中的祖先元素(已定位)来定位,绝对定位的元素是脱离标准流的

2.1 绝对定位的参考点

1、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点 2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点2.1 只要是这个绝对定位元素的祖先元素都可以 2.2 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不可以) 2.3 如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

2.2 绝对定位的注意点

1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素 2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动 3、一个绝对定位的元素会忽略祖先元素的padding

2.3 绝对定位水平居中

1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中 2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

<head>  
    <style>
        * {margin: 0;
           padding: 0;}
        .box1 {
            width: 200px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 50%;
            margin-left: -100px;}
    </style>
</head>
<body>
<div class="box1"></div>
</body>

3.固定定位

固定定位的元素是脱离标准流的

1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）: 背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动,而固定定位可以让某一个元素不随着滚动条的滚动而滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;}
        .bg {
            width: 600px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        div {
            width: 100px;
            height: 100px; }
        .box1 {
            background-color: red;
        }
        .box2 {
            border: 1px solid #000;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;

            background-color: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        .box3 {
            background-color: blue;
        }
        .box4 {
            background-color: yellow;
            height: 2000px;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到顶部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

注意:

1、固定定位，就是相对浏览器窗口定位,页面如何滚动，这个盒子显示的位置不变。 2、固定定位的元素是脱离标准流的，不会占用标准流中的空间 3、固定定位和绝对定位一样不区分行内、块级、行内块级 4、E6不支持固定定位

4.静态定位

默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流

5.z-index

1、z-index属性：用于指定定位的元素的覆盖关系 1.1、z-index值表示谁压着谁,数值大的压盖住数值小的 1.2、只有定位了的元素，才能有z-index值,也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值,而浮动的东西不能用。 1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。 1.4、如果大家都没有z-index值(默认所有元素z-index值为0),或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。 2、注意：从父现象 2.1父元素没有z-index值, 那么子元素谁的z-index大,谁盖住谁 2.2父元素z-index值不一样, 那么父元素谁的z-index大,谁盖住谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index示例</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 1000px;
            width: 100%;
        }
        .cover {
            background-color: rgba(0,0,0,0.35);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
        }
        .modal {
            background-color: white;
            height: 400px;
            width: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div class="c1">
   <p>asasadds</p>
</div>
<div class="cover"></div>
<div class="modal">
    <form action="">
        <p>姓名<input type="text"></p>
        <p>密码<input type="password"></p>
        <p><input type="submit" value="登录"></p>
    </form>
</div>
</body>
</html>

4. overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

水平和垂直均设置：overflow 设置水平方向：overflow-x 设置垂直方向：overflow-y