css 定位 position 以及float的一些额外特性

不念不忘少年蓝@ 2022-12-27 01:19 147阅读 0赞

css定位及与float的对比

为什么需要定位？

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2.定位是让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位=定位模式 + 边偏移

定位模式：一个元素在文档中的定位方式

边偏移：决定该元素的最终位置
在这里插入图片描述

子绝父相

1.子级绝对定位，不会占位置，可以放到父盒子的里面的任何地方，不会影响其他的兄弟盒子。

2.父盒子需要加定位限制子盒子在父盒子内显示。(父亲需要保留原来的位置不能用absolute）

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  7.         li {
  8.             list-style: none;
  9.         }
  11.         .tb-promo {
  12.             position: relative;
  13.             width: 520px;
  14.             height: 280px;
  15.             margin: 100px auto;
  16.         }
  18.         /* 并集选择器可以集体声明相同的样式  避免代码重复 */
  20.         .prev,
  21.         .next {
  22.             position: absolute;
  23.             top: 50%;
  24.             margin-top: -15px;
  25.             width: 20px;
  26.             height: 30px;
  27.             background: rgba(0,0,0,.3);
  28.             text-align: center;
  29.             line-height: 30px;
  30.             color: #fff;
  31.             text-decoration: none;
  32.         }
  34.         .prev {
  36.             left: 0;
  37.             border-top-right-radius: 15px;
  38.             border-bottom-right-radius: 15px;
  39.         }
  41.         .next {
  42.             /* 如果一个盒子既有left属性又有right属性，则默认会执行left属性 。同理 left  bottom  会执行top */
  43.             right: 0;
  44.             border-top-left-radius: 15px;
  45.             border-bottom-left-radius: 15px;
  46.         }
  48.         .promo-nav {
  49.             position: absolute;
  50.             bottom: 15px;
  51.             left: 50%;
  52.             margin-left:-35px ;
  53.             width: 70px;
  54.             height: 13px;
  55.             background: rgba(255,255,255,.3);
  56.             border-radius: 7px;
  57.         }
  59.         .promo-nav li {
  60.             float: left;
  61.             width: 8px;
  62.             height: 8px;
  63.             background-color: #fff;
  64.             border-radius: 50%;
  65.             margin:3px;
  66.         }
  67.     </style>
  70. <body>
  71.     <div class="tb-promo">
  72.         <img src="images/tb.jpg" alt="">
  73.         <a href="#" class="prev"> <</a>
  74.         <a href="#" class="next"> ></a>
  75.         <ul class="promo-nav">
  76.             <li></li>
  77.             <li></li>
  78.             <li></li>
  79.             <li></li>
  80.             <li></li>
  81.         </ul>
  82.     </div>
  83. </body>

固定定位

fixed也是飘起来 不影响标准流
固定在版心右侧：

  1. {position:fixed;
  2.  left:50%;
  3.  margin-left:  50%的版心宽度的一半
  4.  }

sticky(粘性定位）

相对定位（relative）与固定定位（fixed）的混合

1.以浏览器的可视窗口为参照（固定的特性）
2.占有原来位置（相对的特性）
3.必须添加top left right bottom其中一个才有效（不然就当相对定位看）

导航栏

  1. {
  2. position:sticky;//兼容性差
  3. top:0;

定位的叠放位置

z-index

1.默认 auto 可为正 可为负 数值越大 盒子越靠上
2.如果数值相同 后来者居上

注意

1.加了绝对定位和固定定位的盒子不能通过margin: 0 auto 水平居中
但是相对定位符合标准流 ，是可以用margin:auto的。

  1. {
  2. position:absolute;
  3. left:50% ;  //浏览器的一半 （或者父亲的一半）
  4. //margin  负值  往左走  自己盒子宽度的一半
  5. margin-left : -（盒子自己的一半）；

2.定位特殊性

1）与浮动元素相似 行内元素（span等）添加绝对或者固定定位，可以直接设置高度和宽度。

2）块级元素添加绝对或者固定，如果不给宽度和高度，默认大小是内容的大小（不是标准流特性占一行）。

3）浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题。

3.定位的拓展

1）浮动元素只会压住它下面标准流的盒子 ，但是不会压住下面标准流盒子里面的文字（图片）。但是定位（绝对和固定）会全部压住。

【浮动之所以不会压住文字，因为浮动最初产生的目的是为了做文字环绕效果。文字会围绕浮动元素】

总结

relative 占位置
absolute 不占位置
fixed 不占位置

发表评论

表情：
评论列表 （有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS position定位

    文档流 文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。让元素脱离文档流的方法

    蔚落蔚落/ 0 赞/ 174 阅读