ASCII码 ASCII码

相对定位与绝对定位和固定定位的分析与示例

发布于：2022-07-13 12:02:19  栏目：技术文档
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="../static/6-2c.css">
  8.     <title>相对定位与绝对定位和固定定位</title>
  9. </head>
  10. <body>
  11.     <h1>hello</h1>
  12.     <h2>world</h2>
  13.     <div class="box">box
  14.         <div class="wrap">wrap</div>
  15.     </div>
  16.     <div class="box2">box2</div>
  17. </body>
  18. </html>

对应的css文件为：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     height: 1200px;
  7.     position: relative;
  8. }
  9. /* *h1，.box是非定位元素，故都在文档流中 */
  10. h1,h2{
  11.     border:1px solid #000;
  12. }
  13. h2{
  14.     /* *相对定位：元素依然在文档流中，只不过自身位置发生了偏移 */
  15.     position: relative;
  16.     top: 50px;
  17.     left: 0;
  18.     right: 0;
  19.     bottom: 0;
  20. }
  21. .box{
  22.     width: 250px;
  23.     height: 250px;
  24.     border: 1px solid #000;
  25.     background-color: wheat;
  26.     /* position: relative; */
  27. }
  28. /* *绝对定位：已经不受文档流控制而是相对于最近的祖先元素所做的偏移 */
  29. /* *这里由于父元素.box不是定位元素，故.wrsp元素相对于祖先元素body定位 */
  30. .box>.wrap{
  31.     width: 100px;
  32.     height: 100px;
  33.     background-color: lightblue;
  34.     position: absolute;
  35.     top:20px;
  36.     left: 30px;
  37. }
  38. /* *.box2为固定定位，表示相对于body的位置永不变化，即使有滚动条滚动时 */
  39. .box2{
  40.     width: 100px;
  41.     height: 100px;
  42.     background-color: green;
  43.     /* *固定定位 */
  44.     position: fixed;
  45.     top: 300px;
  46.     left: 0;
  47. }

效果图如下：

总结分析如下：

1）h1，.box是非定位元素，故都在文档流中。2）h2为相对定位：元素依然在文档流中，只不过自身位置发生了偏移。3）绝对定位：已经不受文档流控制而是相对于最近的祖先元素所做的偏移。这里由于父元素.box不是定位元素，故子元素.wrsp相对于祖先元素body而定位。4）.box2为固定定位，表示相对于body的位置永不变化，即使有滚动条滚动时。

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行