CSS定位 

<!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>
    <link rel="stylesheet" href="定位.css">
</head>

<body>

    <!-- <div class="box2">
        <div class="box1"></div>
        <em>
            <img src="hot.png" alt="">
        </em>
    </div> -->

    <!-- <em>
        <img src="固定定位.png" alt="">
    </em> -->
    <!-- <div class="dog">

    </div> -->
    <!-- <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p>

    <p>sldfjasdjfa</p>
    <p>sldfjasdjfa</p> -->


    <div>
        asdfasdfa
    </div>

    <span>
asdfasdf
    </span>

</body>

</html>
/* 1.相对定位相对自身原来的位置移动
2.原来在标准流中的位置继续占有,后面的盒子仍然以标准流
的方式对待他,不脱标,继续保留原来的位置 */


/* .box1 {
    position: relative;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: red;
} */


/* 据对定位
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
2.以最近一级有定位的祖先元素为准
3.绝对定位不再占用原来的位置 */


/* .box1 {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
    background-color: red;
}

.box2 {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: purple;
}

.box2 em {
    position: absolute;
    top: 4px;
    right: -4px;
} */


/* 固定定位
1.以浏览器可视窗口为参照点
2.跟父元素没有关系
3.不随滚动条移动
4.固定定位不占原来的位置 */


/* em {
    position: fixed;
    top: 100px;
    left: calc(50% + 300px)
}

.dog {
    margin: 0 auto;
    width: 600px;
    height: 2000px;
    background-color: pink;
} */


/* 定位的特殊属性 
1.行内元素添加绝对定位或者固定定位,可以设置宽度和高度
2.块级元素添加定位,如果不指定宽度和高度,默认是其内容大小*/

div {
    position: absolute;
    background-color: red;
}

span {
    width: 200px;
    height: 200px;
    position: relative;
    top: 200px;
    background-color: red;
}

 

posted on 2022-02-03 11:36  历历往事如在昨日  阅读(32)  评论(0)    收藏  举报

导航