Css Positioning Relative Over Fixed/absolute

Apologies if I appear quite 'noobish' with CSS. I've been trying to set the following... #0 { width: 100%; height: y; border: 1px solid black; } #a { position: fixed; floa

Solution 1:

First of all, a couple of fixes: #0 needs to be named something else, because IDs cannot start with a number. You're also missing a : in the float property for #a. Not sure what's with the 'x' and 'y' for the height/width, either - I assume those are just examples?

Fixed and Absolute elements are out of the document flow. That is, they don't take up space as far as normal positioned elements.

Therefore, the fixed element will have the relative one over it in your example, as you found because they can inhabit the same x-y space. If you had it as absolute, top:0; left: 0, the same thing would happen.

Next, you had one as a float (almost), so let's consider that float changes all of that positioning. Floats are 'special' in the way they are laid out. They are in the flow, but will be as far up and in the float direction as possible. If they're too wide to fit next to other floated content on that line, they go to the next line.

You could do

<style>#a
  {
  float:left;
  height:100px;
  width:150px;
  background-color:black;
  }
  #b
  {
  clear:left;
  height:100px;
  width:150px;
  background-color:green;
  }
 </style><divid='a'>aaaaa aaa</div><divid='b'>bbb bbb</div>

'Clear' means an element will appear beneath preceding elements that are floated. #b will be on the next line, underneath #a. You could also make #a have a big margin on the right, or be wide enough to fill whatever container and not leave room for #b, to make #b be beneath #a instead of next to it.

Solution 2:

I don't believe your width: x and height: y syntax is correct, and your #a float property is missing a colon. Also, IDs can't start with numbers, so #0 should be changed to something else. Here is the code that makes everything work right. You had to get rid of your fixed and relative positioning. CSS:

#zero {
 width: 100%;
 border: 1px solid black;
}   
#a {
 float: left;
 border: 1px solid black;
}
#b {
 float: left;
 border-right: 1px solid black;
}

And the HTML:

<div id="zero">Some div...</div>
<div id="a">Another div</div>
<div id="b">Final div...</div>