定位的学习_定位学-CSDN博客

本文链接：https://blog.csdn.net/Sherry1107/article/details/121276806

相对定位：position:relative相对于原来的位置，进行指定的偏移,仍然在标准文档之中
```
position:relative
top: -10px;
left: 10px;
bottom: -10px;
right: 10px;
```
绝对定位：基于xxx定位，相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流之中，原来的位置不会被保留

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移，并在父级元素范围内移动

3. 固定定位

<!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: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){/*固定定位*/
      width: 50px;
      height: 50px;
      background: #fad65c;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

4. 图层 z-index：默认是0，最高没有限制

透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="05.css">
</head>
<body>
<div id="content">
  <ul>
    <li><img src="images/0603.jpg" alt=""></li>
    <li class="tipText">检测速度</li>
    <li class="tipBg"></li>
    <li>刷卡积分积分</li>
    <li>认为我日哦i哦</li>
  </ul>
</div>
</body>
</html>

#content{
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    padding: 0;
    margin: 0;
    /*无序标签去点*/
    list-style: none;
}
#content ul{
    /*父级元素相对定位*/
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 20px;
    top:210px;
}
.tipText{
    /*层级 ，最底层0级，可以让文字浮在最上层*/
    z-index: 999;
}
.tipBg{
    /*或者让背景变透明，文字也能浮上来，opacity:0.5px*/
    background: blue;
}

5. 动画