What happens with fixed position elements when I don't set a "left" or "right" property and is it dependable?

Question

I want to create a sidebar sitting to the left of a text container, but I'm very unsure if my method is dependable across browsers!

Basically, I rely on a fixed positioned sidebar but avoiding to set left to anything so that it is contained within its parent.

Is this a default behaviour or something different browsers handle in their own little funny ways?

Example fiddle: https://jsfiddle.net/7enadwus/

Example code:

<div class="container">
  <p>Some text</p>
</div>

<div class="float">
  <div class="sidebar">
    <p>Sidebar</p>
  </div>
</div>

.container {
  width: 100%;
  height: 600px;
  background-color: red;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.float {
  position: relative;
  height: 10px;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: blue;
}

.sidebar {
  position: fixed;
  top: 0;
}

check thi url https://developer.mozilla.org/en-US/docs/Web/CSS/position — Anzil khaN, Mar 05 '18 at 10:27
@MohanSrinivas Sorry, I don't understand? The float class is just to get the sidebar to hang BESIDE the container, not mashed in it! It has a bigger width. — SophieD, Mar 05 '18 at 10:27
@AnzilkhaN What in that document do you want me to read? I can't find anything that helps me! — SophieD, Mar 05 '18 at 10:28
actually whats ur exact issue?u just added some css and div..based on that css, your side bar and container display — Mohan Srinivas, Mar 05 '18 at 10:34
The sidebar div is under float div.float div is relative that's y the side bar position also changing automatically! — Mohan Srinivas, Mar 05 '18 at 10:37
@Mohan Srinivas: The title is not difficult to understand. The asker just wants to know if it's OK not to set left or right when using fixed positioning. — BoltClock, Mar 05 '18 at 11:32

BoltClock · Accepted Answer · 2018-03-05T12:00:01.483

0

This is expected behavior covered in section 10.3.7 of the spec. See this answer. Fixed positioned elements count as absolutely positioned elements for the purposes of these sources. In short, left and right default to auto when not set, resulting in the fixed positioned element remaining in its static position (where it would have been had position not been set).

Yes, you can rely on this behavior being interoperable across all browsers.

edited Mar 05 '18 at 12:00

answered Mar 05 '18 at 11:35

BoltClock

700,868
160
1,392
1,356

I will accept this answer but I think you have some typo or something in your text. It doesn't shift to the far left of the browser viewport *unless* `left` is set! – SophieD Mar 05 '18 at 11:57
@SophieD: Thanks for pointing that out, I must've been distracted. – BoltClock Mar 05 '18 at 12:00

What happens with fixed position elements when I don't set a "left" or "right" property and is it dependable?

1 Answers1