search

博客列表 >定位的类型与应用场景和使用条件

定位的类型与应用场景和使用条件

刚哥哥
刚哥哥原创
2020年12月22日 19:09:581969浏览

定位主要用于页面布局，将盒子按要求摆放。以及制作一些广告为等特定场景；

通过position属性进行定位：

基本语法：
  1. position(定位属性):static(属性值)；偏移参数（具体放哪里由偏移参数决定）
  2.     top: 20px;
  3.     right:20px;
  4.     bottom:20px;
  5.     left:20px;

详细介绍：

position的常用属性值有：

1、static：遵循文档流， 静态的；（默认值），
top、left、right、bottom等属性不会被应用。
2、relative: 遵循文档流，（相对定位），

  1. 参照自身在文档流中的位置，通过 top、right、bottom、left 等属性进行偏移，偏移时不影响文档流中的任何元素。

特点：

  1. 它是相对于自己原来的位置来移动(移动位置是以自已原来位置作为参考点)
  2. 原来在标准流的位置继续占有，后面的盒子不会向上移动到它原来的位置。即不脱离文档流。

3、absolute: 对象脱离文档流，（绝对定位），

  1. 使用top、right、bottom、left 等属性进行偏移，盒子的偏移位置不影响文档流中的任何元素，其 margin（外边距）不与其它任何 margin(外边距)折叠。

特点：

  1. 如果没有祖先元素或者祖先元素没有使用定位，则以浏览器的            document文档为参考系。
  2. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定        位祖先元素为参考系移动位置。
  3. 绝对定位不再占有原先默认的位置，即脱离文档流，空出之前占有的    位置。

z-index 属性设置 定位的盒子的层叠优先级。

4、fixed: 对象脱离文档流，（固定定位），

  1. 使用top、right、bottom、left 等属性以浏览器可视窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
  2. 应用场景：广告位、返回顶部、登录框等元素定位。

特点：

  1. 以浏览器的可是窗口为参照；
  2. 不会随着滚动条滚动；
  3. 与父元素没有任何关系；
  4. 不占有之前的位置，即脱离文档流；

应用场景

什么场景用相对定位什么场景用绝对定位？

答：父元素使用相对定位，子元素使用绝对定位；

  1. 子元素使用绝对定位不会占有位置（脱离文档流），可以放到父盒子里面的任何一个地方，不会影响其它的兄弟元素。
  2. 父盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子布局时，必需占有位置，因为不占有位置的话（脱离文档流），会影响下面盒子的布局，因此父元素只能用相对定位。

定位的前提条件

  1. 必须给 父元素加定位属性，父元素用相对定位（position:relative），这样父元素不会脱离文档流，不会影响后面的元素。
  2. 给子元素加定位属性，子元素用绝对定位（position:absolute）,通过top、left、right、bottom值进行偏移定位。
  3. 为什么要满足这两个条件呢？由于绝对定位是以父元素为参考，如果父元素没有定位，它往上找，如果到html根元素都没有设置定位属性，就会以html元素为参考，进行定位。

演示代码

  1.   <title>定位演示代码</title>
  2.     <style>
  3.         .fbox{
  4.             width:200px;
  5.             height:200px;
  6.             background-color: lawngreen;
  7.             border: 1px red solid;
  8.             /* 给父级盒子设置定位属性，给子级盒子作定位参考，relative相对定位，不脱离文档流，不影响后面的盒子 */
  9.             position: relative;
  11.         }
  12.         .ebox{
  13.             width:60px;
  14.             height:60px;
  15.             background-color: violet;
  16.             border: 1px yellow solid;
  17.             /* 给盒子设置定位属性，absolute=绝对定位 */
  18.             position:absolute;
  19.             top:50px;
  20.             /* left:50px;
  21.             right:50px;
  22.             bottom:20px; */
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <!-- 创建一个父级盒子 -->
  29.     <div class="fbox">
  30.       <!-- <p>父级盒子</p> -->
  31.       <div class="ebox">
  32.           <p>儿子</p>
  33.       </div>
  34.     </div>
  35. </body>

固定定位演示

  1. <title>蒙版效果</title>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0;
  6.             /* 设置ie盒子 */
  7.             box-sizing: border-box;
  8.         }
  10.         html {
  11.             font-size: 16px;
  12.         }
  14.         header{
  15.             padding: 0.5em 1em;
  16.             /* width: 60em;
  17.             height: 5em; */
  18.             background-color: lawngreen;
  19.             /* position: relative; */
  20.             /* 解决父类高度塌陷问题 */
  21.             overflow: hidden;
  22.         }
  24.         header h3 {
  25.             float: left;
  26.             /* line-height: ; */
  27.             /* line-height: 4em; */
  28.         }
  30.         header button {
  31.             color: red;
  32.             width: 5em;
  33.             height: 3em;
  34.             float:right;
  35.             /* position: absolute; */
  36.             /* left:60em; */
  37.             /* right: 0; */
  38.            /*  line-height: 3em;
  39.             right: 2em;
  40.             top: 1.5em; */
  43.         }
  44.         header button:hover{
  45.             cursor: pointer;
  46.             background-color: #fff;
  47.         }
  48.         /* 蒙版css */
  49.         .mtk-backdrop{
  50.             /* 设置背景, rgb(0,0,0,0.5) 0,0,0,表示颜色，0.5表示透明度 */
  51.             background: rgb(0,0,0,0.5);
  52.             /* 给蒙版设置定位（fixed=固定定位） */
  53.             position:fixed;
  54.             top:0;
  55.             right:0;
  56.             bottom:0;
  57.             left:0;
  58.         }
  59.         /* 主题css */
  60.         .mtk-body{
  61.             padding:1em;
  62.             min-width:20em;
  63.             border:1px black solid;
  64.             background: linear-gradient(to right,red,blue);
  65.             /* 设置主体为固定定位 */
  66.             position: fixed;
  67.             top:5em;
  68.             left:30em;
  69.             right:30em;
  70.         }
  71.         /* 开始的适合 登录框应该时隐藏的 */
  72.         .mtk{
  73.             /* display: none; */
  74.         }
  75.     </style>
  76. </head>
  78. <body>
  79.     <!-- 页头 -->
  80.     <header>
  81.         <h3>点击登录按钮弹出登录框，登录框采用固定定位在屏幕正中并带蒙版效果</h3>
  82.         <button type="button">登录</button>
  83.     </header>
  87.     <!-- 模态框 -->
  88.     <div class="mtk">
  89.         <!-- 蒙版：用来盖住后面的内容，使它半透明效果 -->
  90.         <div class="mtk-backdrop"></div>
  91.         <!-- 主体 -->
  92.         <div class="mtk-body">
  93.             <div class="denglu">
  94.                 <from action="" method="post">
  95.                     <label for="username"></label>
  96.                     用户名：<input type="text" id="username" name="userneme" value="特朗普">
  97.                     <br />
  98.                     <label for="userpw"></label>
  99.                     密码：<input type="password" id="userpw" name="userpw" value="">
  100.                 </from>
  101.             </div>
  102.         </div>
  103.     </div>
  105. </body>

上一条：选择器提权方式;字体与字体图标;盒模型常用属性的缩写方案下一条：阐述float和position的作用，并利用定位做一个拟态框案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议