CSS Note 1.4 position定位

最新推荐文章于 2025-07-24 15:30:22 发布

原创最新推荐文章于 2025-07-24 15:30:22 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position定位

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML和CSS的基本用法，通过实例展示了如何使用HTML创建网页结构，并利用CSS进行样式设计，包括相对定位、绝对定位和固定定位的运用，以及层叠顺序的概念。

一、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;
}

三、效果展示