CSS-定位

最新推荐文章于 2022-12-03 23:29:46 发布

z_Ever1

最新推荐文章于 2022-12-03 23:29:46 发布

阅读量270

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_ever1/article/details/78353523

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>定位</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       div{
           width: 100px;
           height: 200px;
           background-color: skyblue;
       }
       div:first-child{
           position: static;
       }
       div:nth-child(2){
           /*固定定位*/
           position: fixed;
           right: 10px;
           bottom: 10px;
       }
       div:nth-child(3){
           /*相对定位*/
           position: relative;
           left: 10px;
           top:20px;
       }
       div:nth-child(4){
           /*绝对定位最近的定位祖先元素左上点*/
           position: absolute;
           left: 10px;
           top: 10px;
           background-color: red;
           /*设置堆叠顺序*/
           /*z-index: 100;*/
       }
       .outer{
           width: 300px;
           height: 300px;
           background-color: gold;
           /*设置祖先定位元素*/
           position: relative;
       }
       .outer div{
           position: absolute;
           left: 20px;
           top: 10px;
       }
   </style>
</head>
<body>
   <div>static</div>
   <div>fixed</div>
   <div>relative</div>
   <div>absolute</div>
   
   <div class="outer">
       <div>absolute2</div>
   </div>
   <div>正常</div>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
</body>
</html>