Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型与应用场景和使用条件
Blogger Information
Blog 16
fans 0
comment 0
visits 16736
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
定位的类型与应用场景和使用条件
刚哥哥
Original
1956 people have browsed it

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

通过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>

Correcting teacher：天蓬老师天蓬老师

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