css之position定位

position定位

静态定位（static）

默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--默认就是静态定位，可以忽略不写-->
<img src="../img/770EC837-667F-4DB5-9D0B-C0C84CF479C4.jpg" style="position: static">

</body>
</html>

相对定位（absolute）

生成绝对定位的元素，相对于static定位意外以外的第一个父元素进行定位
元素的位置通过left，top，right，bottom属性进行规定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #outer{
      width: 500px;
      height: 500px;
      background-color: pink;
      margin-left: 300px;
      position: relative; /* 直接设置一个相对定位*/
    }
    #div01{
      width: 100px;
      height: 100px;
      background-color: cornflowerblue;
      /*
      蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，橙色div上移
      实际开发中，往往需要蓝色div在粉色div中进行移动；

      当给一个元素设置了相对定位后，它相对于谁进行变化呢？
      它会一层一层向上找父级节点是否存在定位，如果找到body都没有找到的话，就会相对body进行定位

      建议使用：父级节点使用relative定位，子节点使用absolute定位
      */
      position: absolute;
      left: 30px;
      top: 50px;
    }
    #div02{
      width: 100px;
      height: 100px;
      background-color: coral;
    }

  </style>
</head>
<body>
<div id="outer">
  <div id="div01">1111</div>
  <div id="div02">2222</div>

</div>

</body>
</html>

绝对定位（relative）

生成相对定位的元素，相对于其正常位置进行定位
因此，“left:20”会向元素的LEFT位置添加20像素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--
相对定位：
相对元素自身所在的原来的位置进行定位
可以设置left，right，top，bottom四个属性

效果：在进行相对定位后，元素原来的位置被保留，被占用了---》保留站位其他元素的位置不会发生移动
一般情况下，left和right不会同时使用，top和bottom不会同时使用，选择一个即可。
若都设置了，优先级：左上>右下

应用场景：小范围移动的时候，结合绝对定位使用

z-index：设置堆叠顺序的
-->
</head>
<body>
<div style="width: 500px;height: 500px;background-color: pink">
  <div style="width: 100px;height: 100px;background-color: bisque;position: relative;z-index: 90">  </div>
    <div style="width: 100px;height: 100px;background-color: yellow;position: relative;bottom: 10px;left: 20px;z-index: 0">  </div>
      <div style="width: 100px;height: 100px;background-color: green">

      </div>
    </div>
</body>
</html>

固定定位（fixed）

生成绝对定位的元素，相对于浏览器窗口的进行定位
元素的位置通过left，top，right，bottom属性进行规定
应用场景：
在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #mydiv{
      width: 50px;
      height: 400px;
      background-color: cadetblue;
      position: fixed;
      right: 0px;
      top: 300px;
    }
  </style>
</head>
<body>
<div id="mydiv">1111</div>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好</p>
<p>您好d</p>
</body>
</html>
posted @ 2023-03-02 01:03  King-DA  阅读(16)  评论(0)    收藏  举报