HTML——CSS——定位（笔记）

阳光穿透心脏的1/2处 2023-10-02 11:22 103阅读 0赞

1.为什么使用定位

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

2定位使用方式

定位=定位模式+边偏移

2.1定位模式

  1. 1.静态定位static
  2. ​
  3. 2.相对定位relative（常用）
  4. ​
  5. 3.绝对定位absolute（常用）
  6. ​
  7. 4.固定定位fixed

2.2边偏移

  1. (定义元素相对于其父元素某个方向上的距离)
  2. top属性     
  3. bottom属性  
  4. left属性
  5. right属性

3.使用定位

3.1静态定位static

  1. 1.默认的定位方式，无定位的意思，无实际含义
  2. 选择器{position:static;}
  3. 2特点：按照标准流布局，无偏移

3.2相对定位relative(常用！)

特点1：

  1. 相对定位是指元素在移动位置的时候，相对于它原来的位置。
  2. 选择器{position:relative;}

特点2：

  1. 原来在标准流的位置继续占有，保留原来的位置(后面的盒子依然是标准流，所以没有脱标！)

案例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .one{
  8.                 width: 150px;
  9.                 height: 150px;
  10.                 background-color: red;
  11.                 position: relative;
  12.                 top: 100px;
  13.                 left: 100px;
  14.             }
  15.             .two{
  16.                 width: 150px;
  17.                 height: 150px;
  18.                 background-color: yellow;
  19.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.          <div class="one"></div>
  25.          <div class="two"></div>
  26.     </body>
  27. </html>
  28. ​

3.3绝对定位absolute(常用！)

  1. 注意点1：没有父级或父级无定位情况
  2. ​
  3. 注意点2：移动位置的时候是相对于祖先元素来说的

绝对定位特点1：

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

案例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.              .one{
  8.                 width: 200px;
  9.                 height: 200px;
  10.                 background: red;
  11.                 position: absolute;             
  12.                 top: 10px;
  13.                 left: 10px;
  14.             /*top: 10px;
  15.             left: 10px;*/
  16.              }
  18.         </style>
  19.     </head>
  20.     <body>
  21.          <div class="one"></div>
  23.     </body>
  24. </html>

案例2：<如果父级元素没有定位，则以浏览器为基准>

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.         .father{
  8.             width: 600px;
  9.             height: 600px;
  10.             background-color: #00BFFF;
  11.         }
  12.          .one{
  13.             width: 200px;
  14.             height: 200px;
  15.             background: red;
  16.             position: absolute;
  17.             /*top: 10px;
  18.             left: 10px;*/
  19.             top: 10px;
  20.             right: 10px;
  21.          }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="father">
  27.             <div class="one"></div>
  28.         </div> 
  29.     </body>
  30. </html>

绝对定位特点2：

  1. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。

案例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.         .father{
  8.             position: relative; /** 父元素相对定位**/
  9.             width: 600px;
  10.             height: 600px;
  11.             background-color: #00BFFF;
  12.         }
  13.          .one{
  14.             width: 200px;
  15.             height: 200px;
  16.             background: red;
  17.             position: absolute;
  18.             top: 10px;
  19.             right: 10px;
  20.          }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div class="father">
  26.             <div class="one"></div>
  27.         </div> 
  28.     </body>
  29. </html>

案例2：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.         .grandfather{
  8.             position: relative; /** 爷爷有定位定位**/
  9.             width: 700px;
  10.             height: 700px;
  11.             background-color: yellow;
  12.         }
  13.         .father{
  14.             width: 600px;
  15.             height: 600px;
  16.             background-color: #00BFFF;
  17.         }
  18.          .one{
  19.             width: 200px;
  20.             height: 200px;
  21.             background: red;
  22.             position: absolute;
  23.             top: 10px;
  24.             right: 10px;
  25.          }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="grandfather">
  31.             <div class="father">
  32.                 <div class="one"></div>
  33.             </div> 
  34.         </div>
  35.     </body>
  36. </html>

绝对定位特点3：

  1. 绝对定位不再占有原先的位置(脱标)

3.4绝对/相对定位总结

  1. 绝对定位和相对定位的使用场景：

(1)子绝父相:

子级使用绝对定位，父级需要使用相对定位

(分析：父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位)

案例：

作业：

3.5固定定位fixed

  1. 元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变
  2. 选择器{position:fixed;}

固定定位特点1：

  1. 以浏览器的可视窗口为参照点移动元素（缩小浏览器大小）

案例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .one{                
  8.                 position: fixed;
  9.                 top: 0;
  10.                 left: 0;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.          <div class="one">
  16.             <img src="img/2.png"/>
  17.          </div>
  18.     </body>
  19. </html>
  20. ​

案例2：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .one{                
  8.                 position: fixed;
  9.                 top: 0;
  10.                 left: 0;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.          <div class="one">
  16.             <img src="img/2.png"/>
  17.          </div>
  18.          <div style="height: 1000px;"></div>
  19.     </body>
  20. </html>

固定定位特点2：

  1. 固定定位不占有原先的位置

案例：(物料2.png)

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .one{                
  8.                 position: fixed;
  9.                 top: 0;
  10.                 left: 0;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.          <div class="one">
  16.             <img src="img/2.png"/>
  17.          </div>
  18.          <div >333333333333</div>
  19.          <div >333333333333</div>
  20.          <div >333333333333</div>
  21.          <div >333333333333</div>
  22.          <div >333333333333</div>
  23.          <div >333333333333</div>
  24.          <div >333333333333</div>
  25.          <div >333333333333</div>
  26.          <div >333333333333</div>
  27.          <div >333333333333</div>
  28.          <div >333333333333</div>
  29.          <div >333333333333</div>
  30.           <div >333333333333</div>
  31.          <div >333333333333</div>
  32.          <div >333333333333</div>
  33.          <div >333333333333</div>
  34.          <div >333333333333</div>
  35.          <div >333333333333</div>
  36.          <div >333333333333</div>
  37.          <div >333333333333</div>
  38.          <div >333333333333</div>
  39.          <div >333333333333</div>
  40.          <div >333333333333</div>
  41.          <div >333333333333</div>
  42.           <div >333333333333</div>
  43.          <div >333333333333</div>
  44.          <div >333333333333</div>
  45.          <div >333333333333</div>
  46.          <div >333333333333</div>
  47.          <div >333333333333</div>
  48.          <div >333333333333</div>
  49.          <div >333333333333</div>
  50.          <div >333333333333</div>
  51.          <div >333333333333</div>
  52.          <div >333333333333</div>
  53.          <div >333333333333</div>
  54.           <div >333333333333</div>
  55.          <div >333333333333</div>
  56.          <div >333333333333</div>
  57.          <div >333333333333</div>
  58.          <div >333333333333</div>
  59.          <div >333333333333</div>
  60.          <div >333333333333</div>
  61.          <div >333333333333</div>
  62.          <div >333333333333</div>
  63.          <div >333333333333</div>
  64.          <div >333333333333</div>
  65.          <div >333333333333</div>
  66.           <div >333333333333</div>
  67.          <div >333333333333</div>
  68.          <div >333333333333</div>
  69.          <div >333333333333</div>
  70.          <div >333333333333</div>
  71.          <div >333333333333</div>
  72.          <div >333333333333</div>
  73.          <div >333333333333</div>
  74.          <div >333333333333</div>
  75.          <div >333333333333</div>
  76.          <div >333333333333</div>
  77.          <div >333333333333</div>
  78.           <div >333333333333</div>
  79.          <div >333333333333</div>
  80.          <div >333333333333</div>
  81.          <div >333333333333</div>
  82.          <div >333333333333</div>
  83.          <div >333333333333</div>
  84.          <div >333333333333</div>
  85.          <div >333333333333</div>
  86.          <div >333333333333</div>
  87.          <div >333333333333</div>
  88.          <div >333333333333</div>
  89.          <div >333333333333</div>
  90.           <div >333333333333</div>
  91.          <div >333333333333</div>
  92.          <div >333333333333</div>
  93.          <div >333333333333</div>
  94.          <div >333333333333</div>
  95.          <div >333333333333</div>
  96.          <div >333333333333</div>
  97.          <div >333333333333</div>
  98.          <div >333333333333</div>
  99.          <div >333333333333</div>
  100.          <div >333333333333</div>
  101.          <div >333333333333</div>
  102.           <div >333333333333</div>
  103.          <div >333333333333</div>
  104.          <div >333333333333</div>
  105.          <div >333333333333</div>
  106.          <div >333333333333</div>
  107.          <div >333333333333</div>
  108.          <div >333333333333</div>
  109.          <div >333333333333</div>
  110.          <div >333333333333</div>
  111.          <div >333333333333</div>
  112.          <div >333333333333</div>
  113.          <div >333333333333</div>
  114.           <div >333333333333</div>
  115.          <div >333333333333</div>
  116.          <div >333333333333</div>
  117.          <div >333333333333</div>
  118.          <div >333333333333</div>
  119.          <div >333333333333</div>
  120.          <div >333333333333</div>
  121.          <div >333333333333</div>
  122.          <div >333333333333</div>
  123.          <div >333333333333</div>
  124.          <div >333333333333</div>
  125.          <div >333333333333</div>
  126.           <div >333333333333</div>
  127.          <div >333333333333</div>
  128.          <div >333333333333</div>
  129.          <div >333333333333</div>
  130.          <div >333333333333</div>
  131.          <div >333333333333</div>
  132.          <div >333333333333</div>
  133.          <div >333333333333</div>
  134.          <div >333333333333</div>
  135.          <div >333333333333</div>
  136.          <div >333333333333</div>
  137.          <div >333333333333</div>
  138.           <div >333333333333</div>
  139.          <div >333333333333</div>
  140.          <div >333333333333</div>
  141.          <div >333333333333</div>
  142.          <div >333333333333</div>
  143.          <div >333333333333</div>
  144.          <div >333333333333</div>
  145.          <div >333333333333</div>
  146.          <div >333333333333</div>
  147.          <div >333333333333</div>
  148.          <div >333333333333</div>
  149.          <div >333333333333</div>
  150.           <div >333333333333</div>
  151.          <div >333333333333</div>
  152.          <div >333333333333</div>
  153.          <div >333333333333</div>
  154.          <div >333333333333</div>
  155.          <div >333333333333</div>
  156.          <div >333333333333</div>
  157.          <div >333333333333</div>
  158.          <div >333333333333</div>
  159.          <div >333333333333</div>
  160.          <div >333333333333</div>
  161.          <div >333333333333</div>
  162.     </body>
  163. </html>
  164. ​

4.总结

  1. 1.标准流
  2. 可以让盒子上下(块级)去排列或者左右(行内)排列，垂直的块级盒子显示就用标准流布局
  3. 2.浮动
  4. 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
  5. 3.定位
  6. 定位最大的优势就是有层叠的概念，可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。

发表评论

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

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

相关阅读

    相关 网页前端DIV定位笔记

    从以前的Table做框架到现在最新的div定位，过程确实不是很适应，总怕出现不少的页面混乱。在转型过程中学习了不少东西，与大家共勉： 1、怎么让div居中 以前用Table

    矫情吗；*矫情吗；*/ 0 赞/ 310 阅读