Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 相对定位、绝对定位、固定定位、粘性定位flex与grid
Blogger Information
Blog 16
fans 0
comment 0
visits 16195
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
相对定位、绝对定位、固定定位、粘性定位flex与grid
Leo的博客
Original
955 people have browsed it

相对定位与绝对定位

文档流:显示顺序与书写顺序一致
static:静态定位，就是没有定位。完全由浏览器控制（根据元素在html文档中的循序）

  1. <div class="box three">
  2.       <div class="box tow">
  3.         <div class="box one"></div>
  4.       </div>
  5.     </div>

给三个盒子添加边框和样式

  1. <style>
  2.       .box {
  3.         border: 1px solid #000;
  4.         /* 默认div是个块元素 */
  5.         display: inline-block;
  6.       }
  7.       .box.one {
  8.         width: 5em;
  9.         height: 5em;
  10.         background-color: cadetblue;
  11.       }
  13.       .box.tow {
  14.         width: 10em;
  15.         height: 10em;
  16.         background-color: blanchedalmond;
  17.       }
  19.       .box.three {
  20.         width: 15em;
  21.         height: 15em;
  22.         background-color: rebeccapurple;
  23.       }

相对定位

一旦某一个元素使用了非static的定位属性,那么它就转换成了”定位元素”

相对定位,相对于它在文档流中的原始位置进行了偏移,它占据的原来的空间并不释放

  1. .one {
  3.         /* position: relative;
  4.         top: 1em;
  5.         left: 1em;

绝对定位: 相对于离它最近的”定位元素”进行偏移,如果没有,就一直向上,直到最初包含块(html,body)

  1.         position: absolute;
  2.         left: 2em;
  3.         top: 2em;
  4.       }

固定定位与粘性定位

先建个盒子

  1. <div class="box">

文本

  1. <article>
  2.         <h2 style="background-color: green">国内新闻</h2>
  3.         <ul>
  4.           <li><a href="">任正非重磅发声：鸿蒙之外，华为还有备胎</a></li>
  5.           <li><a href="">留学生回国一年：家长陪读网课，教育花费近百万</a></li>
  6.           <li><a href="">明星频繁翻车，虚拟偶像是解决方案吗？</a></li>
  7.           <li><a href="">美国只有用实际行动才能摘掉“抗疫失败国”的帽子</a></li>
  8.           <li><a href="">福建莆田最小确诊患者仅4岁 穿隔离服独自做检查</a></li>
  9.           <li><a href="">潜望｜iPhone13背后的苹果供应链江湖：出局与挣扎</a></li>
  10.           <li>
  11.             <a href=""
  12.               >多虑了！网络诈骗不收割“网瘾老人”，而是孤独青年人｜钛度图闻</a>
  13.           </li>
  14.           <li>
  15.             <a href="">iPhone13发布，一台苹果手机究竟值多少钱？真的成倍利润？</a>
  16.           </li>
  17.           <li>
  18.             <a href="">美团、饿了么双双发文：严禁诱导和强迫骑手注册成个体工商户</a>
  19.           </li>
  20.           <li>
  21.             <a href="">莫名被开通十余个手机号？工信部推出一证查询名下电话卡功能</a>
  22.           </li>
  23.         </ul>
  24.       </article>
  25.       <article>
  26.         <h2 style="background-color: red">国际新闻</h2>
  27.         <ul>
  28.           <li>
  29.             <a href="">美军战略司令部司令：中国在发展战略武器方面取得了前所未有的突破</a>
  30.           </li>
  31.           <li>
  32.             <a href="">美国防情报局长称“基地”组织可能在一两年内威胁美国本土，还不忘扯上中俄</a>
  33.           </li>
  34.           <li>
  35.             <a href="">美媒：3名前美国情报人员在阿联酋当黑客雇佣兵，承认泄露敏感军事技术</a>
  36.           </li>
  37.           <li>
  38.             <a href="">美官员：约700人周末将在首都集会 支持国会骚乱案示威者</a>
  39.           </li>
  40.           <li><a href="">结束16年的德国总理生涯后，默克尔打算做什么？</a></li>
  41.           <li>
  42.             <a href="">12人涉非法集结案宣判，“支联会”成员何俊仁判监禁10个月</a>
  43.           </li>
  44.           <li>
  45.             <a href="">对华开战会提前通知！防止总统宣战，美最高将领两次秘密致电中方</a>
  46.           </li>
  47.           <li>
  48.             <a href="">英媒：消息人士称塔利班领导层为组建新政府“大吵一架”</a>
  49.           </li>
  50.           <li>
  51.             <a href="">杀人灭口？以色列前总理腐败案证人意外死亡，引发各界猜测</a>
  52.           </li>
  53.           <li>
  54.             <a href="">印度将试射洲际弹道导弹，印媒制造矛盾：可覆盖中国多个内陆城市</a>
  55.           </li>
  56.         </ul>
  57.       </article>

css代码样式

  1.         .box {
  2.           margin: 5em auto;
  3.           border: 2px solid #000;
  4.           height: 320px;
  5.           overflow: scroll;
  6.           line-height: 2em;
  7.         }

h2标签盒子样式

  1.  .box article h2 {
  2.           color: white;
  3.           margin: 0;

当标题滚动到顶部时, 将标题粘到盒子的顶部
相当于相对定位+固定定位的二合一

  1.           position: sticky;
  2.           top: 0;
  3.         }

固定定位,其实是绝对定位的一个特例,它是相对一个固定的参照物(根元素)

  1.  .box img {
  2.           width: 4em;
  3.           border-radius: 50%;
  4.           box-shadow: 2px 2px 3px #666;
  5.           position: fixed;
  6.           right: 2em;
  7.           top: 13em;
  8.           z-index: 999;
  9.         }

输出：

定位实战：模态框

  1. <body>
  2.     <header>
  3.       <h2>个人博客</h2>
  4.       <button onclick="document.querySelector('.modal').style.display='block'">
  5.         登录
  6.       </button>
  7.     </header>

第一部分半透明遮罩

  1. <div class="modal">
  3.       <!-- 加入遮罩 -->
  4.       <div
  5.         class="modal-bg"
  6.         onclick="this.parentNode.style.display='none'"
  7.       ></div>

遮罩下面是个弹层，弹层表单

  1.       <form action="" class="modal-form">
  2.         <fieldset style="display: grid; gap: 1em">
  3.           <legend>用户登录</legend>
  4.           <input type="email" name="email" placeholder="user@email.com" />
  5.           <input type="password" name="password" placeholder="不少于6位" />
  6.           <button>登录</button>
  7.         </fieldset>
  8.       </form>
  9.     </div>

表单美化

  1. <style>
  2.   * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.   }
  7.   body {
  8.     background-color: #eee;
  9.   }
  11.   header {
  12.     background-color: mediumaquamarine;
  13.     padding: 0.5em 1.5em;
  14.     display: flex;
  15.   }
  17.   header button {
  18.     margin-left: auto;
  19.     width: 4em;
  20.   }
  22.   .modal {

把模态框容器转为”定位元素”

  1.     position: relative;
  2.   }
  4.   .modal .modal-form fieldset {
  5.     background-color: lightyellow;
  6.     border: none;
  7.     padding: 2em;
  8.     box-sizing: 0 0 5px #888;
  9.   }
  11.   .modal .modal-form fieldset legend {
  12.     padding: 5px 1em;
  13.     background-color: mediumorchid;
  14.     color: white;
  15.   }

固定表单

  1.   .modal .modal-form {
  2.     position: fixed;
  3.     top: 10em;
  4.     left: 20em;
  5.     right: 20em;
  6.   }

半透明遮罩

  2.       .modal .modal-bg {
  3.         position: fixed;
  4.         top: 0;
  5.         left: 0;
  6.         right: 0;
  7.         bottom: 0;
  8.         background-color: rgb(0, 0, 0, 0.5);
  9.       }

模态框隐藏

  1.       .modal {
  2.         display: none;
  3.       }

输出：

flex思维导图：

grid思维导图：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post