Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 理解绝对定位/固定定位
Blogger Information
Blog 16
fans 0
comment 0
visits 5716
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
理解绝对定位/固定定位
Sinan学习博客
Original
359 people have browsed it

理解绝对定位/固定定位

1. 实例演示绝对定位与固定定位,并描述联系与区别

1.1 绝对定位

  • position:absolute;绝对定位
  • 与 position:relative;搭配使用，可以指定绝对定位元素的参考容器。
  • 绝对定位默认是以浏览器视口为参考容器进行定位的

举例说明：

  1. 设置2个li，父容器是ul
  2. 将html,body,ul这3个容器的border都设为5px,颜色分别为：红、黄、蓝
  3. 将li:2 设置为绝对定位:position:absolute;

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>绝对定位</title>
  8.     <style>
  9.         *{padding:0;margin:0;box-sizing:border-box;}
  10.         html{
  11.             border: 5px solid red;
  12.             width:700px;
  13.             /* position: relative; */
  14.             /*margin:50px;*/
  15.         }
  16.         body{
  17.             border: 5px solid yellow;
  18.             width:500px;
  19.             position: relative;
  20.             padding:50px;
  21.         }
  22.         ul{
  23.             border: 5px solid blue;
  24.             width:300px;
  25.             height:300px;
  26.             /* position: relative; */
  27.         }
  28.         ul li{
  29.             list-style: none;
  31.         }
  32.         ul li:first-child{
  33.             background-color: lightblue;
  34.         }
  35.         ul li:first-child + *{
  36.             background-color: violet;
  37.             /*将 li:2 设置为 position:absolute;top:10;right:100xp;*/
  38.             position: absolute;
  39.             top:10px;
  40.             right: 100px;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <ul>
  46.         <li>Li:1</li>
  47.         <li>Li:2</li>
  48.     </ul>
  49. </body>
  50. </html>

示例1：

将 li:2 设置为 position:absolute;top:10;right:100xp; ,其它参考容器没有设置position:relative;

当未给 li:2 的任意容器ul,body,html设置position:relative;时 li:2 的定位参考容器是浏览器视口。

示例2：

当给 li:2 的任意容器ul,body,html设置position:relative;时 li:2 的定位参考容器是设置了position:relative;的容器。

当给 li:2 的任意容器ul,body,html设置position:relative;时 li:2 的定位参考容器是设置了position:relative;的容器，且参考容器的如果设置了border宽度，定位会从边框内沿开始计算。

1.2 固定定位

  • position:fixed;固定定位
  • 固定定位是以浏览器视口为参考容器进行定位的
  • 其它父容器设置positive:relative;对他没影响
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>绝对定位</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         border: 5px solid red;
  16.         width: 700px;
  17.       }
  18.       body {
  19.         border: 5px solid yellow;
  20.         width: 500px;
  21.         min-height:2000px;
  22.       }
  23.       ul {
  24.         border: 5px solid blue;
  25.         width: 300px;
  26.         height: 300px;
  27.       }
  28.       ul li {
  29.         list-style: none;
  30.       }
  31.       ul li:first-child {
  32.         background-color: lightblue;
  33.       }
  34.       ul li:first-child + * {
  35.         background-color: violet;
  36.         position: fixed;
  37.         top: 10px;
  38.         right: 100px;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <ul>
  44.       <li>Li:1</li>
  45.       <li>Li:2</li>
  46.     </ul>
  47.   </body>
  48. </html>

设置body的最小高度为min-height:2000px;使页面出现滚动条，拖动滚动条，固定元素LI:2 不会随着内容滚动。

绝对定位、固定定位的联系与区别

绝对定位、固定定位二者都可以用于定位元素在页面中的任意位置。
区别：

  1. 绝对定位可以用 position:relative 改变参考容器，固定定位只能定位于视口。
  2. 固定定位元素不会随内容滚动，绝对定位可以。

2. 实例演示flex必会的容器与项目属性

2.1容器属性 flex-flow

  • flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
  • flex-flow: 1.设置轴向 2.设置是否换行

示例2.1

  1.     <div class="container">
  2.       <div class="item">item1</div>
  3.       <div class="item">item2</div>
  4.       <div class="item">item3</div>
  5.     </div>
  6.     <style>
  7.       .container {
  8.         width: 450px;
  9.         height: 50px;
  10.         display: flex;
  11.         border: 1px solid #999;
  12.         margin: 50px auto;
  13.         /*设置轴向是主轴，不允许换行*/
  14.         flex-flow: row nowrap;
  15.       }
  16.       .container > .item {
  17.         background-color: orange;
  18.         border: 1px solid black;
  19.         padding: 10px;
  20.       }
  21.     </style>

2.2 容器属性 place-content

设置子项目在容器主轴上的排列方式。

  • place-content:start;主轴默认排列 靠左排列
  • place-content:center;居中排列
  • place-content:end;靠右排列
  • place-content:space-between;两端对齐
  • place-content:space-around;分散对齐
  • place-content:space-evenly;平均对齐

    示例2.2






2.3 容器属性 place-items

设置子项目在容器交叉轴上的排列方式。

  • place-items:start;默认排列 靠上排列
  • place-items:center;居中排列
  • place-items:end;靠下排列

    示例2.3



2.4 项目属性 flex

  • flex: 0 1 auto;简写flex:initial;项目不放大，可收缩
  • flex: 1 1 auto;简写flex:auto;完全响应式，放大，收缩均可。
  • flex: 0 0 auto;简写flex:none;完全不响应式，不放大，不收缩。
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