CSS定位

最新推荐文章于 2023-12-25 17:08:57 发布

JamesMoriartyZ

最新推荐文章于 2023-12-25 17:08:57 发布

阅读量72

点赞数

分类专栏： HTML CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/XzXz0207/article/details/128087522

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

一、相对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 布局方式: 文档流, 浮动, 定位 -->
    <!-- 面试题: 请你说一说定位的种类 -->
    <!-- 
        定位: 是一种布局手段, 而且它是一种高级的布局手段,
            可以将页面中的任何元素放在页面中的任意位置
            通过position属性进行设置 
                可选值:
                    static 默认值 不开启定位
                    relative 开启相对定位
                    absolute 开启绝对定位
                    fixed 开启固定定位
                    sticky 开启粘滞定位

        1. 相对定位
            使用position: relative
                特点: 
                    1. 开启了相对定位, 如果不配合偏移量使用, 元素不会发生任何变化
                    2. 相对定位, 是相对于元素原来在文档流中的位置
                    3. 开启了相对定位后, 元素的层级会变高, 也就是会盖住其他元素
                    4. 开启了相对定位后, 元素性质不会发生变化
     -->
    <!-- 
          偏移量: 相对于定位位置挪动的大小的值 
              left 相对于定位位置左侧的偏移量
              right 相对于定位位置右侧的偏移量
              top 相对于定位位置上侧的偏移量
              bottom 相对于定位位置下侧的偏移量

              一般情况下, 设置偏移量
                  水平方向, left或right调动一个值
                  垂直方向, top或bottom调动一个值
      -->
    <style>
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgba(56, 56, 56);
      }
      .box2 {
        width: 200px;
        height: 200px;
        border: 1px solid rgba(56, 56, 56);
        background-color: red;
      }
      .box3 {
        width: 200px;
        height: 200px;
        border: 1px solid rgba(56, 56, 56);
        background-color: yellow;
        /* 开启相对定位 */
        position: relative;
        /* left: 202px; */
        /* bottom: 202px; */
      }
      .box4 {
        width: 200px;
        height: 200px;
        border: 1px solid rgba(56, 56, 56);
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

二、绝对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 
    绝对定位：
      开启绝对定位
        position：absolute；
      开启后特点
        1、开启了绝对定位，如果不配合偏移量使用，元素的位置没有发生变化
        2、开启了绝对定位后，元素会脱离文档流，下面的元素就会跑上去
        3、开启了绝对定位，元素脱离文档流，元素的性质就会发生变化
          不再区分块还是行内还是行内块，也就是块元素不会独占一行了，行内元素可以设置宽高等等
        4、绝对定位的原点，是相对于其包含块来确定的
            一般情况下，如果设置子元素为绝对定位，
            我们会同时设置其父元素相对定位，以便设置偏移量，这种情况叫“子绝父相”，
            但最终还是要根据如何方便设置子元素偏移量为准。
        5、开启了绝对定位，元素会提升一个等级
   
        -->

    <!-- 包含块：
        1、在没有定位的情况下，其包含块就是其父元素或祖先元素
        2、在开启了定位的情况下，其包含块就是离它最近开启了定位的祖先元素，
        如果其祖先元素都没有开启定位，包含块就是根元素（html标签）

         -->
    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        /* 开启一个相对定位 */
        position: relative;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .box2 {
        width: 250px;
        height: 250px;
        background-color: red;
      }
      /* span{
        background-color: pink;
        position: absolute;
        width: 100px;
        height: 100px;
      } */
      .box3 {
        width: 300px;
        height: 300px;
        background-color: plum;
        margin: 10px auto;
        /* position: relative;  */
      }
      .box4 {
        width: 350px;
        height: 350px;
        background-color: rebeccapurple;
        margin: 50px auto;
        /* position: relative; */
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box4">
        box4
        <div class="box3">
          box3
          <div class="box1">box1</div>
        </div>
      </div>
      <!-- <div class="box2"></div> -->
      <!-- <span>使但与</span> -->
    </div>
  </body>
</html>

<!-- 
当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的包含块定位的
	（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，开启BFC属性
	内联元素变成行内块元素，
	块元素的宽度和高度默认都被内容撑开

 包含块：containing block 
-正常情况下：
	离当前元素最近的祖先块元素
-定位情况下：
	离他最近的开启了定位的祖先元素
		如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
		html （根元素，初始包含块） 

-->

三、固定定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 
  固定定位
   如何开启
      position：fixed；
   开启后的特点
    1、开启固定定位后，元素会脱离文档流，元素的性质会发生改变
    2、开启固定定位后，元素会固定在页面中，不会随着滚动条滚动而滚动
    3、开启固定定位后，也需要配合偏移量，来改变元素在页面中位置
    4、固定定位的原点是html根标签,也就是浏览器视口
  常用的场景
    1、固定的侧边导航
    2、固定的广告
    3、固定的顶部、底部导航

 -->
    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        position: relative;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: rgba(255, 165, 0, 0.5);
        /* 开启固定定位 */
        position: fixed;
        right: 0;
        bottom: 45%;
      }
    </style>
  </head>
  <body style="height: 5000px">
    <div class="outer">
      <div class="box1"></div>
      <span>否苦于毒至帝龄亲国。</span>
    </div>
  </body>
</html>

四、粘滞定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>导航条</title>
  </head>
  <!-- 
    粘滞定位
     如何开启
       position: sticky;
     开启之后的特点
      1、开启粘滞定位，元素不会脱离文档流，也就是元素性质也不会发生改变
      2、开启粘滞定位后，元素位置不发生改变，需要配合偏移量使用
          一般情况下，是配合top值使用
         在没有到达top值之前，元素是随着滚动条滚动而滚动，
              当到达top值之后，元素就不会随着滚动条滚动而滚动了
      3、粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容到ie9以上
      4、粘滞定位的原点也是浏览器视口，也就是html根标签
      
     主要的应用场景
      1、侧边导航
      2、广告
      3、顶部导航，底部导航
   -->
  <style>
    ul {
      width: 800px;
      height: 50px;
      line-height: 50px;
      background-color: pink;
      margin-top: 200px;
      /* 开启粘滞定位 */
      position: sticky;
      top: 0px;
    }
    ul > li {
      float: left;
      width: 15%;
      text-align: center;
    }
    li:hover {
      background-color: green;
    }
  </style>
  <body style="height: 5000px">
    <!-- 创建导航条的结构 -->
    <ul>
      <li>导航</li>
      <li>导航</li>
      <li>导航</li>
      <li>导航</li>
    </ul>
    <div>
      不许丰国极且不那慨韦郭兼回已，好别本必逝秦，血而领帝你今太为一力决人，娘也挟不言长洪拿郭壬勇，都了人下居必王满故，沾仇三谓皇但登杂话为活春临得在知是竟何，以死程谓法极，只太已笔最为人与三二变耐锐她冒几徨来，婵向人那学者志同生平而劫，胆罪投若绪，觉里这，了烦以乐子，己皇份皇说有司朗则畴到到仆娘帝，蒲太时时自笔沫花不轻小最知判，价战身者我到登好中鲜我烦我若在了求丑，藏种次同性金兼成他李极看的勉有，你人作侯别连过，人活欲法天诗不说怎学，起彷才只小没姑仃老护的互章笔，派请何高轻毒也上才人对韩方范呼，流未在胸逃你促嗣不人极爱变法秦有元，国了说最，德娟可不游娘师绝连但不是见回的，年设一降成未得孔想会千厄别法妙承洪尝承，县举考答把我一整大航尝付，人何兮松已留设书来惜爱么韩，俭说商即说的五以人则他见可起不生才杨人，此至在的，王尚反登什才平赠子，承到关中路百已你法攻太郭人恼活，韩文洪亲兼流褒烦人评就太孔，他斯娇能陀，不们面为仇相命，到我火得词金攻得望第回王胜遗之读们龄种，两判后貂策，攻判于请作帮，愿官后谢败禀回我，司下生生亓完者中不文报是设若变，将叩衣，又饮才我即败，身报百到活负降老全反楚以，卞属十四。
      常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
    </div>
  </body>
</html>
<!-- 
   粘滞定位 （一般用于页面导航的吸顶效果)
    -当元素的position属性设置为sticky时，则开启了元素的粘滞定位
    （1）以浏览器为参照物（体现固定定位特点）；
    （2）占有原来位置（体现相对定位特点）；
　　 （3）粘滞定位可以在元素到达某个位置时，将其固定 
     (4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动 
 -->

五、绝对定位元素布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 400px;
        height: 400px;
        border: 10px solid red;
        background-color: palegreen;
        position: relative;
      }
      .box2 {
        width: auto;
        height: 100px;
        background-color: orange;
        /* 面试题：让元素水平垂直居中，请你列举几种方式 */
        /*第一种方式： 
        元素会水平垂直居中
        前提在绝对定位的情况下，四个方向偏移量以及元素内容区宽高都是固定值
        让margin为auto
        */
        position: absolute;
        margin: 0;
        left: 0px;
        right: auto;
        /* top: 0;
        bottom: 0; */
      }
    </style>
    <!--
  在定位情况，元素的水平方向，增加了两个值 ，从原来的7个值变为9个值
  但依然遵循过度约束的原则，即水平方向9个值相加必须要等于其父元素内容区的宽度
  如果不等于的话，浏览器就会进行约束调整：
  left margin-left border-left padding-left width 
      padding-right border-right margin-right  right
  0 0 0 0 100 0 0 0 0 =400
      如何调整：
    1、如果9个值中没有auto，调整的就是right
    2、如果有auto，9个值当中，有left margin width right 4个值可以设置auto
        1个auto
          left  margin width right 中设一个auto，其他的值为固定值
          浏览器就调整这个auto
        2个auto
          left margin  调整的就是left
          left width   调整的就是left
          left right   调整的就是right
          margin width   调整的就是width
          margin right   调整的就是right
          width right   调整的就是right
        3个auto
          left  margin width   调整的就是left
          left  margin  right  调整的就是right
          margin width right    调整的就是right
 
        4个auto
          left  margin width right   调整的就是right

      总结：
       1、如果9个值当中，没有auto，调整的就是right
       2、如果9个值当中，有auto，调整的顺序
         right>left>width>margin
        3、在绝对定位的情况，如果right，left，top，bottom，width为固定值
        margin为auto，元素就会水平垂直居中
    -->
  </head>
  <body>
    <div class="box1">
      <div class="box2">1111</div>
    </div>
  </body>
</html>