css之position详解

position详解

我们可以使用position来进行定位，元素的位置由top，bottom，left，right等值进行控制。

position属性允许的值：

static：布局正常，是默认值。

relative：相对于正常位置进行定位。

absolute：相对于其具有非静态位置位置的第一祖先位

fixed：相对于浏览器窗口进行定位

sticky：该元件根据文档的正常流动定位，然后偏移相对于它的最近的祖先滚动和包含块（最接近的块级祖先），包括表相关的元素的基础上的值top，right，bottom，和left。偏移量不会影响任何其他元素的位置。此值始终创建新的堆叠上下文。需要注意的是粘性元素“大棒”，以具有“滚动机制”，其最近的祖先（创建时overflow是hidden，scroll，auto，或overlay），即使祖先是不是最近的实际滚动的祖先。这有效地抑制了任何“粘性”行为

相对定位（relative）

相对定位的元素从文档中的正常位置偏移给定量，但没有偏移影响其他元素。在下面的示例中，请注意其他元素的放置方式，就好像“Two”占据了其正常位置的空间

 事例

html

< div  class = “ box ”  id = “ one ” > One </ div > 
< div  class = “ box ”  id = “ two ” > Two </ div > 
< div  class = “ box ”  id = “ three ” > Three </ div > 
<div  class = “ box“  id = ” four “ >Four </ div >

css

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

 绝对定位（absolute）

相对定位的元素保留在文档的正常流程中。相反，绝对定位的元素从流动中取出; 因此，其他元素的位置就好像它不存在一样。绝对定位的元素相对于其最近定位的祖先（即，不是最近的祖先static）定位。如果定位的祖先不存在，则它相对于ICB定位，该ICB包含文档根元素的块。

事例

html

<h1>绝对定位 </h1> 

<p>我是基本的块级元素。我相邻的块级元素位于我下面的新行上。</p> 

<p class="positioned">默认情况下，我们跨越父元素宽度的100％，并且我们与子内容一样高。我们的总宽度和高度是我们的内容+填充+边框宽度/高度。</p> 

<p>我们的利润分开了。由于边缘坍塌，我们将其中一个边距的宽度分开，而不是两者兼而有之。</p > 

<p >内联元素 <span >就像这个 </span >和 <span >这个 </span >位于同一条线上，相邻的文本节点，如果有相同的空间线。如果可能的话，溢出的内联元素 <span >会换行到新行 - 比如这个包含文本 </span >，或者如果不包含就转到新行，就像这个图像一样： <img  src = "https://mdn.mozillademos.org/files/13360/long.jpg " > </p >

css

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

固定定位（fixed）

固定定位类似于绝对定位，所不同的是该元素的包含块是通过所建立的含初始块视口中，除非任何祖先具有transform，perspective或filter属性设置为比其他的东西none（参见CSS转换规格），然后使该祖先取代包含块的元素。这可用于创建“浮动”元素，无论滚动如何，该元素都保持在相同位置。在下面的示例中，框“One”固定为距离页面顶部80像素，距离左侧10像素。即使在滚动之后，它仍然保持在相对于视口的相同位置。

html

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

css

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。例如...

#one  {  position ： sticky ;  上： 10px ;  }

...将定位与ID的元素一个相对直到视口被滚动，使得该元件将是从顶部小于10个像素。超过该阈值，元素将固定为从顶部10像素。

粘性定位的常见用途是用于按字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方，直到它们在屏幕外滚动。然后，“B”标题将保持固定在视口的顶部，直到所有“B”项目都在屏幕外滚动，此时它将被“C”覆盖，而不是使用其余内容滑动屏幕。标题，等等。

你必须有至少一个指定的阈值top，right，bottom，或left为粘稠定位像预期的那样。否则，它将与相对定位无法区分。

事例

html

1 <dl>
 2   <div>
 3     <dt>A</dt>
 4     <dd>Andrew W.K.</dd>
 5     <dd>Apparat</dd>
 6     <dd>Arcade Fire</dd>
 7     <dd>At The Drive-In</dd>
 8     <dd>Aziz Ansari</dd>
 9   </div>
10   <div>
11     <dt>C</dt>
12     <dd>Chromeo</dd>
13     <dd>Common</dd>
14     <dd>Converge</dd>
15     <dd>Crystal Castles</dd>
16     <dd>Cursive</dd>
17   </div>
18   <div>
19     <dt>E</dt>
20     <dd>Explosions In The Sky</dd>
21   </div>
22   <div>
23     <dt>T</dt>
24     <dd>Ted Leo &amp; The Pharmacists</dd>
25     <dd>T-Pain</dd>
26     <dd>Thrice</dd>
27     <dd>TV On The Radio</dd>
28     <dd>Two Gallants</dd>
29   </div>
30 </dl>

css

* {
  box-sizing: border-box;
}

dl > div {
  background: #FFF;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC;
}

可访问性问题

确保在缩放页面以增加文本大小时，使用absolute或fixed值定位的元素不会遮盖其他内容。

重叠

z-index

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
  width: 200px;
  background-color: #ffffff;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

p.one {
  z-index: 3;
  position: absolute;
  left: 0px;
  top: 0px;
}

p.two {
  z-index: 1;
  position: absolute;
  left: 150px;
  top: 25px;
}

p.three {
  z-index: 2;
  position: absolute;
  left: 40px;
  top: 35px;
}
</style>

</head>


<body>
  <div class="page">
    <p class="one">
      Here is paragraph <b>one</b>. This will be at the top of the page.
    </p>
    <p class="two">
      Here is paragraph <b>two</b>. This will be underneath the other
      elements.
    </p>
    <p class="three">
      Here is paragraph <b>three</b>. This will be at the bottom of the
      page.
    </p>
  </div>

</body>
</html>