ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS定位详解 [打印本页]
作者: 慢吞云雾缓吐愁    时间: 3 天前
标题: CSS定位详解
1. 相对定位

   
     1.1    如何设置相对定位？        给元素设置    position:relative    即可实现相对定位。        可以使用    left    、    right    、    top    、    bottom    四个属性调整位置。        1.2    相对定位的参考点在那里？        相对自己原来的位置        1.3    相对定位的特点：        1. 不会离开文档流，元素位置的厘革，只是视觉效果上的厘革，不会对其他元素产生任何影响。        2. 定位元素的表现层级比普通元素高，无论什么定位，表现层级都是一样的。        默认规则是：        定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。        3.    left    不能和    right    一起设置，    top    和    bottom    不能一起设置。        4.    相对定位的元素，也能继续浮动，但不推荐这样做。        5.    相对活动的元素，也能通过    margin    调整位置，但不推荐这样做。   
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>01_相对定位</title>
  7.     <style>
  8.         .outer{
  9.             width: 500px;
  10.             background-color: aquamarine;
  11.             border: 1px solid black;
  12.             padding: 20px;
  13.         }
  14.         .box{
  15.             width: 100px;
  16.             height: 100px;
  17.             font-size: 20px;
  18.         }
  19.         .box1 {
  20.             background-color: red;
  21.         }
  22.         .box2 {
  23.             background-color: green;
  24.             position: relative;
  25.             left: 10px;
  26.         }
  27.         .box3 {
  28.             background-color: hotpink;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="outer">
  34.         <div class="box box1">1</div>
  35.         <div class="box box2">2</div>
  36.         <div class="box box3">3</div>
  37.     </div>
  38. </body>
  39. </html>
复制代码

 留意：绝大多数环境下，相对定位，会与绝对定位共同使用。
2. 绝对定位

      2.1    如何设置绝对定位？        给元素设置    position: absolute    即可实现绝对定位。        可以使用    left    、    right    、    top    、    bottom    四个属性调整位置。      绝对定位的参考点是参考它的  包罗块  。  
      什么是包罗块？        1. 对于没有离开文档流的元素：包罗块就是父元素；        2. 对于离开文档流的元素：包罗块是第一个拥有定位属性的先人元素（如果全部先人都        没定位，那包罗块就是整个页面）   







口诀：子绝父相(子元素开启绝对定位，父元素就要开启相对定位)



鼠标浮动在父元素上，盒子2向右移动200px
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>02_绝对定位</title>
  8.     <style>
  9.         .outer {
  10.             width: 500px;
  11.             background-color: aquamarine;
  12.             border: 1px solid black;
  13.             padding: 20px;
  14.             position: relative;
  15.         }
  17.         .box {
  18.             width: 100px;
  19.             height: 100px;
  20.             font-size: 20px;
  21.         }
  23.         .box1 {
  24.             background-color: red;
  25.         }
  27.         .box2 {
  28.             background-color: green;
  29.             /* 给2开启了绝对定位，他就脱离了文档流 3就占领了2的位置 */
  30.             position: absolute;
  31.    
  32.         }
  34.         .box3 {
  35.             background-color: hotpink;
  36.         }
  38.         .outer:hover .box2{
  39.             right: 200px;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="outer">
  47.         <div class="box box1">1</div>
  48.         <div class="box box2">2</div>
  49.         <div class="box box3">3</div>
  50.     </div>
  51. </body>
  53. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4