css-210301-01

最新推荐文章于 2024-06-17 19:16:08 发布

白光一

最新推荐文章于 2024-06-17 19:16:08 发布

阅读量59

点赞数

分类专栏：前端文章标签： css html

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/117202881

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css - 210301 - 01

定位
- 相对定位
- 绝对定位
- 固定定位
- z-index

定位

相对定位

position: relative;		相对定位，相对于原来的位置指定偏移；原来的位置还					   会被保留（div不会塌陷）
	
	top			上
	bottom		下
	left		左
	right		右

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

    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 20px;
            padding: 5px;
            line-height: 15px;
        }
        #father{
            border: 2px solid #05e59d;
            padding: 10px;
            font-size: 13px;
        }
        #first{
            background-color: aliceblue;
            border: 2px dashed #1c9008;
            position: relative;
            top: -50px;     /*向上平移50px*/
        }
        #second{
            background-color: aquamarine;
            border: 2px dashed #131a18;
            position: relative;
            left: 50px;     /*距离当前位置，向右50px*/
        }
        #third{
            background-color: cadetblue;
            border: 2px dashed #e50518;
            position: relative;
            right: 50px;       /*距离当前位置，向左50px*/
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">窗口一</div>
    <div id="second">窗口二</div>
    <div id="third">窗口三</div>
</div>

</body>
</html>

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

    <style>
        body{
            padding: 10px;
            margin: 10px;
        }
        #father{
            padding: 5px;
            width: 300px;
            height: 300px;
            border: 2px solid #c40928;
        }
        a{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center; /*字体居中*/
            display: block;     /*变成块元素*/
            background-color: #f6879d;
            color: white;       /*字体颜色*/
            text-decoration: none;  /*去掉下滑线*/
        }
        a:hover{
            background-color: #5656f6;
        }
        #address02,#address04{
            position: relative;
            left: 200px;
            top: -100px;
        }
        #address05{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>

<div id="father">
    <a id="address01" href="">链接一</a>
    <a id="address02" href="">链接二</a>
    <a id="address03" href="">链接三</a>
    <a id="address04" href="">链接四</a>
    <a id="address05" href="">链接五</a>
</div>

</body>
</html>

绝对定位

position: absolute;

1.没有父级元素定位前，相对于浏览器定位
2.父级元素定位下，会对父级元素进行偏移（在父级范围移动）
现对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，不在标准文档流中，原来的位置不会保存

<!--相对于父级绝对定位-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test04</title>

    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 20px;
            padding: 5px;
            line-height: 15px;
        }
        #father{
            border: 2px solid #05e59d;
            padding: 10px;
            font-size: 13px;
            position: relative;
        }
        #first{
            background-color: aliceblue;
            border: 2px dashed #1c9008;
        }
        #second{
            background-color: aquamarine;
            border: 2px dashed #131a18;
            position: absolute;
            right: 20px;
        }
        #third{
            background-color: cadetblue;
            border: 2px dashed #e50518;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">窗口一</div>
    <div id="second">窗口二</div>
    <div id="third">窗口三</div>
</div>

</body>
</html>

固定定位

position: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test05</title>
    <style>
        body{
            height: 1500px;
        }
        #div01{
            /*绝对定位*/
            width: 50px;
            height: 50px;
            background-color: #f6879d;
            color: white;
            text-align: center;
            line-height: 50px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        #div02{
            /*固定定位*/
            width: 100px;
            height: 100px;
            background-color: #7e6df1;
            color: white;
            text-align: center;
            line-height: 100px;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div id="div01">绝对</div>
<div id="div02">固定</div>

</body>
</html>

z-index

白光一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-210301-01

css - 210301 - 01定位相对定位绝对定位固定定位z-index定位相对定位position: relative; 相对定位，相对于原来的位置指定偏移；原来的位置还会被保留（div不会塌陷） top 上 bottom 下 left 左 right 右<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫