CSS relative positioning takes precedence over fixed and absolute positioning

Question

CSS relative positioning takes precedence over fixed and absolute positioning

Forgive me if I seem a bit inexperienced with CSS. I've been trying to style the following...

#element0 {
 width: 100%;
 height: y;
 border: 1px solid black;
}   
#elementA {
 position: fixed;
 float left;
 width: x;
 height: y;
 border: 1px solid black;
}
#elementB {
 position: relative;
 float: left;
 width: x;
 height: y;
 border-right: 1px solid black;
}

/* HTML */
<div id="element0">Some div...</div>
<div id="elementA">Another div</div>
<div id="elementB">Final div...</div>

For some reason, when I try to position #elementB below #elementA, #elementB ends up on top of #elementA unless I declare its position as either static or absolute. However, this then requires manually setting the top/left properties and doesn't display correctly in all browsers. Any help would be appreciated!

Issue resolved! (had to set html, body:(width: 95%;)) Thanks for all the advice!

html css positioning

Answer 1

Answer №1

Firstly, there are a couple of corrections needed: The ID #0 must be renamed as IDs cannot start with a number. Additionally, you are missing a colon in the float property for #a. It's unclear why 'x' and 'y' are used for height/width – are they simply placeholders?

Fixed and absolute elements are removed from the document flow, meaning they do not occupy space like normal positioned elements.

As a result, the fixed element will have precedence over the relative one in your scenario because both can occupy the same position on the axis. If you had used absolute positioning with top: 0; left: 0, the outcome would be the same.

Furthermore, since one element is set to float (almost), this affects the positioning significantly. Floats are unique in how they layout elements, aligning as far up and in the float direction as possible. They remain in the flow but may move to the next line if their width exceeds the container size.

You could try:

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

'Clear' ensures an element appears below any preceding floated elements. In this case, #b will be placed on the line beneath #a. You could also adjust the margin or width of #a to prevent #b from appearing beside it, forcing #b to be positioned below #a instead.

Answer 2

Firstly, there are a couple of corrections needed: The ID #0 must be renamed as IDs cannot start with a number. Additionally, you are missing a colon in the float property for #a. It's unclear why 'x' and 'y' are used for height/width – are they simply placeholders?

Fixed and absolute elements are removed from the document flow, meaning they do not occupy space like normal positioned elements.

As a result, the fixed element will have precedence over the relative one in your scenario because both can occupy the same position on the axis. If you had used absolute positioning with top: 0; left: 0, the outcome would be the same.

Furthermore, since one element is set to float (almost), this affects the positioning significantly. Floats are unique in how they layout elements, aligning as far up and in the float direction as possible. They remain in the flow but may move to the next line if their width exceeds the container size.

You could try:

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

'Clear' ensures an element appears below any preceding floated elements. In this case, #b will be placed on the line beneath #a. You could also adjust the margin or width of #a to prevent #b from appearing beside it, forcing #b to be positioned below #a instead.

Answer 3

Answer №2

It seems like there may be some errors in your CSS syntax, particularly with the width: x and height: y. Additionally, the float property for #a is missing a colon. Remember that IDs cannot begin with numbers, so it's necessary to rename #0. Below is the corrected code that ensures everything functions properly, without the need for fixed or relative positioning.

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

Here is the corresponding HTML:

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

Answer 4

It seems like there may be some errors in your CSS syntax, particularly with the width: x and height: y. Additionally, the float property for #a is missing a colon. Remember that IDs cannot begin with numbers, so it's necessary to rename #0. Below is the corrected code that ensures everything functions properly, without the need for fixed or relative positioning.

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

Here is the corresponding HTML:

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

CSS relative positioning takes precedence over fixed and absolute positioning

Answer №1

Answer №2

Similar questions

How can I create a div with a curved design?

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Tips on eliminating margins from rows on smartphones using bootstrap version 4.5

What is the best way to adjust the canvas size to match the background image?

Using VBA to implement a variable with a "customizable name" during runtime

The div element is not rendering the variable

Discrepancy in the vertical pattern repetition of the SVG background

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

"Utilize Rotate3d() to rotate the content of a div element

The css fails to display properly upon the page being reloaded using a button

CSS hover effects are not displayed when using the input type button

tips on adjusting margins or paddings in option select

How to switch between different ng-class styles

"Can the form and action occur on the same page, or should they be

Acquire HTML information using the Robot framework and xpath techniques

Swapping stylesheets using a hyperlink - a simple guide

Using a JavaScript onclick function to retrieve specific elements within the document

Container for grid template columns and responsive window in a single row

Issue with Chrome (2) preventing HTML5 video from loading using video.js

Adjust the color of the contact information when the hamburger menu is activated