将固定位置放在相对位置时如何工作

Question

According to this statement :

When position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)

I put a fixed element inside a relative element, and set its 'left' property to some value.This value should relative to its parent div. But it doesn't work as expected. see my codepen: https://codepen.io/iamnotstone/pen/PgdPrJ?&editable=true

The text should inside the red box.

 body { width: 500px; height: 1400px; margin: 0 auto; } .test { width: 500px; height: 132px; background-color: red; position: relative; left: 200px } h1 { position: fixed; top: 0px; width: 500px; margin: 0 auto; padding: 10px; left: 0px } 

 <div class='test'> <h1>Fixed positioning</h1> </div> 

Answer 1

According to the doc: Fixed positioning

Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

Instead of left you can use margin-left property:

 body { width: 500px; height: 1400px; margin: 0 auto; } .test{ width: 500px; height: 132px; background-color: red; position: relative; left: 200px } h1 { position: fixed; top: 0px; width: 500px; margin: 0 auto; padding: 10px; margin-left: 0px } 

 <div class='test'> <h1>Fixed positioning</h1> </div> 

Answer 2

It's very strange. When I set a transform property inside its parent, everything just works as expected!

 body { width: 500px; height: 1400px; margin: 0 auto; } .test{ width: 500px; height: 132px; background-color: red; position: relative; left: 200px; transform: translate(0) /* added this, and works as expected */ } h1 { position: fixed; top: 0px; width: 500px; margin: 0 auto; padding: 10px; left: 0px } 

 <div class='test'> <h1>Fixed positioning</h1> </div> 

finally , I found the answer.

There is also a statement here :

1. If the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).

2. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:

   A transform or perspective value other than none

   A will-change value of transform or perspective

   A filter value other than none or a will-change value of filter (only works on Firefox).

   A contain value of paint (eg contain: paint;)

Answer 3

If you use position: fixed; you are defining the position of an element in the viewport. If you use position: absolute; then you are defining the position of an element in its parent's box. Also CSS prioritises code lower down, so for example in your code h1 is the most prioritised element (does not apply for classes and ID's, Classes take priority over elements and ID's take priority over classes).

Answer 4

You need to use position: fixed for the document's body and use position: absolute for the elements with the parent which has position: relative , so change h1's position to absolute :

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
.test{
  width: 500px;
  height: 132px;
  background-color: red;
  position: relative;
  left: 200px;
  transform: translate(0) /* added this, and works as expected */
}


h1 {
  position: absolute;   // 
  top: 0px;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  left: 0px
}