TypechoJoeTheme

小屿's Blog

统计
登录
用户名
密码

定位

2021-01-22
/
0 评论
/
76 阅读
/
正在检测是否收录...
01/22

1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 相对定位
    相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 50px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
        }
        #first{
            background-color: green;
            border: 1px dashed green;
            position: relative;/*相对定位:上下左右*/
            top: -20px;
            left: -20px;
        }
        #second{
            background-color: blue;
            border: 1px dashed blue;
        }
        #third{
            background-color: red;
            border: 1px dashed red;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位:position: relative;

相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置会被保留。

top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/

2、绝对定位

定位:基于xxx定位。上下左右

1、没有父级元素定位的前提下,相对于浏览器定位

2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移

3、在父级元素范围内

相对于父级或浏览器的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
            /*父级元素加了一个定位,那么 second 就相对于父级元素定位*/
            position: relative;
        }
        #first{
            background-color: green;
            border: 1px dashed green;
        }
        #second{
            background-color: blue;
            border: 1px dashed blue;
            /*如果父级元素没有定位,就跟着浏览器大小动,相对于浏览器定位*/
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: red;
            border: 1px dashed red;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位,相对于浏览器*/
            width: 100px;
            height: 100px;
            background-color: #006600;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/* fixed */
            width: 50px;
            height: 50px;
            background-color: #0000FF;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

4、z-index

z-index:默认时0,最高无限:999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="image/1.jpeg" alt=""></li>
        <li class="tipText">原地踏步有何意义</li>
        <li class="tipBg"></li>
        <li>时间:2020年11月28日</li>
        <li>地点:湘潭</li>
    </ul>
</div>

</body>
</html>
#content{
    width: 140px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 140px;
    height: 25px;
    top: 112px;
}
.tipText{
    color: white;
    /*z-index: 999;*/
}
.tipBg{
    background-color: #008800;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);*//*古老版本 可能不兼容*/
}
朗读
赞(0)
版权属于:

小屿's Blog

本文链接:

http://koibito.top/index.php/archives/101/(转载时请注明本文出处及文章链接)

评论 (0)
夜空
码农生来就只知道前进
59 文章数
7 评论量

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月