CSS布局中的定位

一、position

1.static

position: static;  默认值，没有定位

2 .relative

相对定位：相对自身原来的位置进行偏移

偏移设置：top、left、right、bottom

相对定位元素的规律：

设置相对定位的盒子会相对于它原来的位置，通过指定的偏移，到达新的位置
设置相对定位的盒子仍然在标准的文档流中，它对父级盒子和相邻的盒子没有任何的影响。
设置相对定位的盒子原来的位置会被保留下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.relative相对定位</title>
    <style>
        div{
            margin: 10px;  /*上下左右的间距为10px*/
            padding: 5px;  /*内边距是5px*/
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
        }
        #first{
            background-color: #f2bb6f;
            border: 1px #B55a00 dashed;
            position: relative;  /*relative表示相对定位，定位的参照物是：自己原来的位置*/
            bottom: -20px;      /*定位会涉及到4个方向，最多我们只需要2个方向即可，top/bottom   left/right，其中他们表示距离哪里多少像素*/
            left: 20px;
        }
        #second{
            background-color: #003580;
            border: 1px #0000A8 dashed;
        }

        #third{
            background-color: #f3f3f3;
            border: 1px #395e4f dashed;
        }
        
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

在这里插入图片描述

2.1浮动元素设置相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.relative相对定位</title>
    <style>
        div{
            margin: 10px;  /*上下左右的间距为10px*/
            padding: 5px;  /*内边距是5px*/
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
        }
        #first{
            background-color: #f2bb6f;
            border: 1px #B55a00 dashed;
            position: relative;
            right: 20px;
            bottom: 20px;
        }
        #second{
            background-color: #003580;
            border: 1px #0000A8 dashed;
            float: right;  /*向右浮动*/
            position: relative;
            left: 20px;
            top:-20px;
        }

        #third{
            background-color: #f3f3f3;
            border: 1px #395e4f dashed;
        }
        
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

2.2相对定位练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04相对定位练习</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 10px;
        }
        a{
            display: block; /*设置为块级元素*/
            width: 100px;
            height: 100px;
            background: #ff88fd;
            color: #fff;
            text-decoration: none;
            text-align: center;  /*水平居中*/
            line-height: 100px;  /*设置行高，垂直居中*/
        }
        a:hover{
            background: #0099ff;
        }
        #box a:nth-of-type(2){
            position: relative;
            left: 200px;
            top: -100px;

        }
        #box a:nth-of-type(4){
            position: relative;
            left: 200px;
            bottom: 100px;

        }
        #box a:nth-of-type(5){
            position: relative;
            left: 100px;
            bottom: 300px;

        }

    </style>
</head>
<body>
    <div id="box">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
</body>
</html>

3.absolute

绝对定位：偏移设置可以left、right、top、bottom

相对于最近的上一个已经定位的元素发生位置的变化

绝对定位小结：

使用了绝对定位的元素以它最近的一个已经定位的祖先元素为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着他们对其它的元素的定位不会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来的

经验:设置了绝对定位但是没有设置偏移量的元素将保持在它原来的位置。在网页制作中可以用于需要使某个元素脱离标准，而仍然希望他在原来位置的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.绝对定位</title>
    <style>
        div{
            margin: 10px;  /*上下左右的间距为10px*/
            padding: 5px;  /*内边距是5px*/
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
            position: relative;  /*将大的盒子设置为相对定位*/
        }
        #first{
            background-color: #f2bb6f;
            border: 1px #B55a00 dashed;
            position: absolute;  /*绝对定位*/
            bottom: 20px;
            left: 30px;
        }
        #second{
            background-color: #003580;
            border: 1px #0000A8 dashed;
        }

        #third{
            background-color: #f3f3f3;
            border: 1px #395e4f dashed;
        }
        
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

3.1练习

在这里插入图片描述

需求：

大盒子宽：430px 高：130px，相对定位
大盒子中有一张图片和无序列表，无序列表就通过绝对定位来实现
li：左浮动，margin-right：5px，宽20px，高20px ，边框1px #666 solid ，文本居中，文字大小12px

position: relative; /将大的盒子设置为相对定位/

position: absolute; /绝对定位/

top、bottom、left、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06轮播广告.html</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #adverImg{
            width: 430px;
            height: 130px;
            position: relative; /*相对定位*/
            margin: 10px;
        }
        #adverImg:after{
            content: "";
            display: block;
            clear: both;
        }
        #number{
            position: absolute; /*绝对定位*/
            bottom: 2px;
            right: 5px;
        }
        #number ul{
            list-style: none;
        }
        #number li {
            float: left;
            width: 20px;
            height: 20px;
            border: 1px #666 solid;
            text-align: center;
            line-height: 20px;
            margin-right: 5px;
            background: #fff;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="adverImg">
        <img src="image/adver-01.jpg" alt="">
        <div id="number">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</body>
</html>

4.固定定位

fixed：设置偏移left、right、top、bottom

类似于绝对定位，不过区别在于定位的基础不是祖先元素，而是浏览器窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07固定定位</title>
    <style>
        body{
            height: 1500px;
        }
        div:nth-of-type(1){  /*第一个div*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;  /*固定定位*/
            right: 0;
            bottom:0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

5. 定位小结

相对定位
特性：
相对于自己初始的位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下面

使用场景：
相对定位一般情况下很少自己单独使用，都是配合绝对定位来使用的，为绝对定位创造定位父级而又不设置偏移

绝对定位
特性：
绝对定位是相对于它的定位父级的位置来定位的。如果没有设置父级定位，则相对于浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下面
设置绝对定位的元素脱离文档流的

使用场景：
一般情况下，绝对定位都能适用。如：下拉菜单、焦点轮播、弹出数字气泡，特别花边场景

固定定位
特性：
相对于浏览器窗口来定位的
偏移量不会随滚动条的移动而移动

使用场景：
一般在网页中被用在窗口左右两边的固定广告，返回顶部的图标、吸顶导航栏等等

二、z-index

知识点

z-index：调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值是0
设置postion属性时，z-inidex属性可以设置各元素的重叠高低关系
z-index数值越大九位于值小的上方

透明度

属性	说明	举例
opacity:x	x的值为0~1，越小就越透明	opacity:0.5;
filter:alpaha（opacity=x）	x的值为0~100，越小就越透明	filter:alpaha（opacity=50）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08z-index</title>
    <style>
        *{margin: 0; padding: 0;}
        ul li{
            list-style: none;
            line-height: 25px;
        }
        #content{
            width: 331px;
            padding: 5px;
            margin: 5px;
            border: 1px #999 solid;
            font-size: 12px;
        }
        #content ul {
            position: relative;
        }
        #content .tipText, #content .tipBg{
            position: absolute;
            top: 100px;
            width: 331px;
            height: 25px;
        }
        #content .tipText{
            text-align: center;
            color: #fff;
            z-index: 1;
        }
        #content .tipBg{
            background: #000;
            opacity: 0.4; 
            /* filter: alpha(opacity=40); */
        }
    </style>
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="image/maple.jpg" alt=""></li>
            <li class="tipText">金秋魅力&#8226;相约共赏香山红叶</li>
            <li class="tipBg"></li>
            <li>时间：11月16日 星期六 8:30</li>
            <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
        </ul>
    </div>
</body>
</html>