Expandable fixed element adjusted by contained elements

Question

In my CSS, I've set this code:

div#show{
background-color:black;
position: fixed;
width:100px;
height:100px;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

This code centers a black box on the page. However, I want to make it so that the box can adjust its size dynamically.

div#show{
background-color:black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

The issue with this change is that it now covers the entire page. Is there a solution to allow the box to expand based on inner elements?

Answer 1

Answer №1

When you use the CSS property position: fixed;, it causes the element to disregard its parent elements and instead adhere to the window.

To make an element stretch to fill the screen with 20% margin around the edges, you can simply use

left: 20%; right: 20%; top: 20%; bottom: 20%;

or a similar approach.

If you set the parent element with position:relative and then specify the styles for a child element like this:

div#show{
  background-color:black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  margin: auto;
}

The element will only stretch to cover its parent element, creating a different layout effect.

Answer 2

When you use the CSS property position: fixed;, it causes the element to disregard its parent elements and instead adhere to the window.

To make an element stretch to fill the screen with 20% margin around the edges, you can simply use

left: 20%; right: 20%; top: 20%; bottom: 20%;

or a similar approach.

If you set the parent element with position:relative and then specify the styles for a child element like this:

div#show{
  background-color:black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  margin: auto;
}

The element will only stretch to cover its parent element, creating a different layout effect.