What Does "Top: 0; Left: 0; Bottom: 0; Right: 0;" Mean

What does right:0 in CSS fixed position mean?

I don't understand why the div.class moves to the right bottom.

That's what the bottom and right CSS properties are for. They position the bottom and right side of the element, counting from the bottom and right side -- in this case from the viewport, since position is fixed.

I really want to know the meaning of '0' precisely in fixed position.

0 is a number of units. It could have been specified as 0px or 0pt or with another unit, but since it doesn't matter which unit is used, as it is 0 anyway, it is specified without unit. It represents the distance from the bounding box of the viewport.

Why does the border never stretch to the right side if I change (bottom: 0; right: 0;) into (top: 0; right: 0; bottom: 0; left: 0;)?

Because the width: 300px specification stipulates what the width of the element should be, and so the rendering has to give up on right: 0, as otherwise the width would be different. However, if you drop the width specification, the element will take the whole space of the viewport:

div.fixed {
  position: fixed;
  _width: 300px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #73AD21;
}

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

Why does position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto actually center?

This is accounted for in section 10.3.7 of the CSS2.1 spec:

The constraint that determines the used values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values [...]

As you can see, auto margins on both sides behave the same for absolutely-positioned elements as they do for non-positioned block-level elements, provided that the left and right offsets, as well as width, are not auto.

Interestingly, only for absolutely-positioned elements, this applies to top, height and bottom as well, which essentially means that it is possible to vertically center an absolutely-positioned element using auto margins. Again, this is provided that the three properties above are not auto, and the respective margins are auto. (In your case, this means margin: auto rather than margin: 0 auto as the latter zeroes out the vertical margins.)

Position: bottom' not working on relatively positioned button element

Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.

If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.

essentially you want:

.wrapper {
  position: relative;
}

.wrapper:nth-child(4){
  position: absolute;
  bottom: 0;
}

Why do I have to set top/bottom and left/right to 0 in order for my body::before to completely cover the page?

The body element by default has margin of 8px on all sides which causes it to move slightly to bottom-right, so when you remove the margins of the body body { margin: 0; }, it fixes that.

Secondly, when you set position: relative; width: 100%; height: 100%, the element goes with the normal flow of the document and takes up 100% of width and height but you did not define the width and height of the body element. So the normal flow of ::before becomes the 100% of the parent which is 0 (i.e. not defined) and hence doesn't show up. Thus in order to use position: relative; on a child element, you need to atleast define the width and height of the parent element with absolute length units.

Hence, the following works

body{
  background: #000;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: "";
  position: relative;

  /* 100% is a relative unit and requires its
  parent to have dimensions with absolute units */
  width: 100%;
  height: 100%;
  ...
}

Making Youtube video responsive towards centre of web page

There is no need to over engineer this, all you need is:

FULL CODE for FULLSCREEN

CLICK FOR DEMO

CSS

html,body{ margin:0; padding:0; height:100%; width:100%; }
#wrap-player{
    height:100%;
    width:100%;
    overflow:hidden;
}

HTML

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>

---

Explanation

• margin/padding: 0

Often referred to as a global reset. This process simply sets defaults for margin and padding and therefore eliminates any browser specific defaults which often vary.

• html: 100%

By default the html of a page is only as high as the content it contains.
Setting the html's height to 100% will cause the height to become the height of the browsers visible area.

• body: 100%

The body follows the same rendering principals as the html. By setting height 100% we ask the body to fill the height of its container, in this case that is the html.

• site div: 100%

It is generally a nice practice to have a master div that wraps the entire website, granting full control over the layout without over manipulating the body tag. Setting height 100% will make the div fill the height of its container, in this case the body tag.

From here on there is a cascading effect that will allow any subsequent block level content to fill the height of its container. This will always be 100% unless we set it other wise.

Any block level element with a height of 100% placed inside the content div as in the image will only ever become the height of its container and as such will not fill the screen.

(Note: making an element position fixed/absolute will remove it from the document flow. In most cases its container and therefore its height will be determined by the next relative positioned parent element encountered.)

• overflow: hidden

By default even when an element has no scroll, scrollbars will often still be shown. Setting overflow hidden simply removes the overflowing content and consequently the scrollbars. As content is never going to overflow in this instance, they are not necessary.

• iframe: 100%

Youtube uses iframes to embed its video content and so setting the height to 100% will make the height of the iframe and subsequently the video within the height of its container.

I recommend setting the height to 100% on the iframe itself as above and not in css for two reasons:

1. If you have more than one iframe in your website the height will be set for them all. If this is desired then that is not a problem.

2. When copying embed code from youtube a default height and width is always set. iframes should have a height and width attribute applied to them directly. I personally do not think setting a height/width and then overwriting with css is good practice.

(Note: This is contrary to my own opinion that all styling should be done within css)

If all parent containers above the iframe are set to 100% all the way up to the html element; the video will be the height of the browsers visible window.

Text-align:center and margin:0 auto not working on absolute positioned elements

Without changing the HTML, the easiest approach to center the element horizontally would be to combine left: 50% and transform: translateX(-50%). This will essentially position the element 50% to the right and then displace half of the element's width by transforming it -50% to the left. In doing so, the element will be centered horizontally regardless of the width which means that you don't need to hardcode any values.

position: absolute;
left: 50%;
transform: translateX(-50%);

Updated Snippet:

#wrap {  border: 1px solid black;  position: relative;  width: 500px;  margin: 0 auto;  height: 80px;}#absolute {  border: 1px solid red;  position: absolute;  transform: translateX(-50%);  left: 50%;  bottom: 0;  cursor: pointer;}

<div id="wrap">  <div id="absolute">Click Me</div></div>

---

Related Topics