FAQ: CSS Display and Positioning - Position: Fixed

What i have understand is that when we fixed header it goes out of normal flow,the space that header acquired is now empty,so the next element that comes after it will take its place,in our condition welcome takes it place and thus goes underneath it and now welcome space is empty so next one will take welcome space and so on.and now when we give position of relative to welcome,it start positioning itself to default static position which in our case is now start of the page,thus when it is render start position is given to the welcome,the header which was not in normal flow is hide by the welcome and lastly we give top 200px to welcome.so welcome comes down 200px and .hidden is now visiable to us.
Someone correct me if I am wrong.

my question is how when we scroll the opacity of header changes to 0.5 so i couldn’t find any “opacity” cod in the exercise.

1 Like
header {
  background-color: #466995;
  border-bottom: 1px solid #466995;
  position: fixed;
  width: 100%;
  z-index: 10;
  opacity: 75%;
}
1 Like

So position: fixed; is the same as position: absolute; except that it has a fixed position - it stays in the same position even when the user scrolls; it scrolls with the user?

The opacity of the header doesn’t actually change. It just goes under everything else which makes it seem like it has a low opacity

2 Likes

The reason everyone is saying that it’s transparent is because it goes under every other element. This makes it seem like it has a low opacity when instead it has a lower z-index than the other elements

2 Likes

I am looking for that answer as well.

Is there a higher specificity when it comes to the position property in html/css? In this exercise we are asked to change the position of the <div class="welcome"> in CSS to position: relative;.

HTML

div class="welcome">
    <h1>Welcome to our survey!</h1>
    <p>We're looking forward to getting your answers so we can make sure our products and services are the best they can be!</p>
  </div>

CSS

.welcome {
  background-color: #DBE9EE;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  width: 100%;
  position: relative;
  /*top: 200px;*/
}

Now above this <div> we have our <header> which reads as follows.

HTML

<header>
    <ul>
      <li>Question 1</li>
      <li>Question 2</li>
      <li>Question 3</li>
      <li>Question 4</li>
      <li>Question 5</li>
      <li>Question 6</li>
    </ul>
  </header>

CSS

header {
  background-color: #466995;
  border-bottom: 1px solid #466995;
  position: fixed;
  width: 100%;
}

It ask us to change it’s position property to position: fixed;.

Why does having the .welcome element property set to relative cover the <header> element when <header> is above .welcome? Does property: relative; have specificity over property: fixed;?

I understand that property: fixed; is a scrollable property but I don’t understand why when we changed it to fixed that it vanishes behind <div class="welcome"> shouldn’t it still be above it because <header> is above <div class="welcome">? Then finally when you proceed to scroll that is when it appears from behind <div class="welcome">

On the final step it asks us to add top: 200px; to our .welcome section which is what I commented out.

.welcome {
  background-color: #DBE9EE;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  width: 100%;
  position: relative;
  /*top: 200px;*/

When adding this we move down the .welcome section 200px allowing us to now view our <header> again. As it was intended prior to adding these properties.
Does this mean that property:fixed does not exist within the rules of elements and their spacing?

This is what the cheatsheet says about property: fixed; Fixed CSS Positioning

Fixed CSS Positioning

Positioning in CSS provides designers and developers options for positioning HTML elements on a web page. The CSS position can be set to static , relative , absolute or fixed . When the CSS position has a value of fixed , it is set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. The navigation bar is a great example of an element that is often set to position:fixed; , enabling the user to scroll through the web page and still access the navigation bar.

I believe the absolute element would position itself relative to it’s closest positioned parent, meaning a parent that has either a relative, absolute, fixed, or sticky value for the position property

check out samyadel’s replies in this thread about z-index

Hi !
Is a relative position without any top or bottom properties the same as static ?

Thanks !

Yes, you start from a static position, but have the option of moving it around.

I have been going through all the replies and cannot still figure out why it suddenly have a lower z-index. Considering Z-index was not declared?

z-index doesn’t exist until it is declared. The box model holds everything together. Top down, the last element will sit where it sits, and if that happens to be on top of, or overlapping other elements, so be it. The later the rendering, the more likely it will be on top. There is no consideration of z-index. This is called, stacking.

Once declared, then it’s a new ball game. The browser assigns all elements a z-index of zero; meaning, they follow the box model (within their own stacking context).

To my mind, the only reason to invoke z-index is when the user is interacting, or it’s a special effect such as a cascading slide sequence. Don’t doubt the dimensions of this property. Learn them.

4 Likes

Hi,

  1. Yes the value fixed to the position property doesn’t exist within the rules of elements and their spacing. Once you set the property position’s value to fixed ALL element in the HTML flow will ignore the fixed element and act as if it does not exist.

  2. header DOES NOT vanish behind

    , the only reason the welcome class selector is ontop of the header is because we positioned the welcome class selector RELATIVE to it’s position (so it’s as if it was plucked out of its static position and while it waited for us to move it with offsetting properties, it waited on the same position we plucked it from and thus covering the welcome class selector temporarily (until we move it).

Can someone tell me what the difference between fixed and absolute is? I thought that fixed stayed where it was, even if you scrolled down on the page. But, absolute scrolled with the page.

When I read this ," And since fixed and absolute positioned elements are removed from the document flow, when a user scrolls, these elements will stay at their specified offset position.", I got very confused.

1 Like

There difference is that fixed is only relative to where it is placed in the BODY and has no other guiding influence. absolute is relative to the first parent or grandparent that has a position: relative property, otherwise it is relative to top, left of the body. Subtle, but different all the same.

According to my understanding, the position of an element will not be affected/changed when the position is in its default state, position: static, by top, bottom, left and right offset. I tried top: 100px; and the position of the element changed even though the position was static. Is there any reason for that? Theoretically, I have understood the difference between the relative and static values for position yet I am still confused about the differences between them.

It’s first parent element that has a position of relative.

I was confused by that as well and after doing a lot of looking around online this seems to provide the answer: Stacking without the z-index property - CSS: Cascading Style Sheets | MDN (mozilla.org). Non-positioned (static) elements are rendered before positioned elements.

1 Like