CSS Note 1.4 position定位

最新推荐文章于 2024-06-11 14:57:32 发布

LetsStudy

最新推荐文章于 2024-06-11 14:57:32 发布

阅读量137

点赞数

分类专栏： CSS Note 文章标签： position定位

本文链接：https://blog.csdn.net/LetsStudy/article/details/82846143

版权

CSS Note 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、Html实例

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

    <link rel="stylesheet" href="Test2.css">
</head>
<body>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>11111111111111</div>
    <div>00000000000000</div>
    <div>11111111111111</div>
    <div>22222222222222</div>
    <div>33333333333333</div>
    <div>44444444444444</div>
    <div>55555555555555</div>
    <div>66666666666666</div>
    <div>77777777777777</div>
    <div>88888888888888</div>
    <div>99999999999999</div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
</body>
</html>

二、CSS实例

@charset "UTF-8";
/*position
relative相对定位，相对于其正常位置进行定位，元素偏移后，还会占据原来的位置
absolute绝对定位，相对于父元素进行定位，元素偏移后，会和原占据该位置元素重叠，在浏览器中的位置会随着滚动条的改变而该别
fix相对于浏览器的绝对定位，元素偏移后，会和占据原占据该位置元素重叠，并且在浏览器中的位置不会随着滚动条的移动而变更位置
static默认值
z-index设置层叠顺序，按值的大小进行层叠，值最小的则在最底层，取值为数字，被设置层叠顺序的元素必须设置过position属性，默认position设置层叠无效*/

div{
    width: 200px;
    height: 60px;
}
#div1{
    background: red;
    position: relative;
    left: 20px;
}
#div2{
    background: blue;
    position: fixed;
    top: 100px;
    left: 20px;
}
#div3{
    background: green;
    position: absolute;
    left:20px;
    z-index: -1;
}
#div4{
    background: black;
   position: absolute;
    left: 10px;
    z-index: -2;
}

三、效果展示

LetsStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Note 1.4 position定位

一、Html实例&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href
复制链接

扫一扫

专栏目录