positing in html / css for 100% width divs-CodePudding

I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.

in my html i have created 3 classes:

    <div >
    </div>
    
    <div >
    </div>
    
    <div >
    </div>

In my css i have defined the colors, shapes and positions of these blocks:

.color-stripred {
    display: block;
    height: 20px;
    width: 100%;
    background-color: red;
    position: static;
    top: 0;
    left: 0;
}

.color-stripblue {
    display: block;
    height: 20px;
    width: 100%;
    background-color: blue;
    left: 0;
}

.color-stripgreen {
    display: block;
    height: 20px;
    width: 100%;
    background-color: green;
    left: 0;
}

The red block is on top followed by blue then green. It looks like the following picture:

The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:

.color-stripred {
    display: block;
    height: 20px;
    width: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
}

what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?

CodePudding user response：

Use width: 100vw; instead of width: 100%;. The problem is caused by position: fixed which you don't need if you use width: 100vw;.

But... I think what you actually want can be achieved by setting body { margin: 0; }. You can see in the snippet below, that if you add this to your CSS, all three boxes become full viewport width.

See the snippet below.

body {
  margin: 0;
}

.color-stripred {
  display: block;
  height: 20px;
  width: 100vw;
  background-color: red;
  position: static;
  top: 0;
  left: 0;
}

.color-stripblue {
  display: block;
  height: 20px;
  width: 100%;
  background-color: blue;
  left: 0;
}

.color-stripgreen {
  display: block;
  height: 20px;
  width: 100%;
  background-color: green;
  left: 0;
}

<div ></div>

<div ></div>

<div ></div>

CodePudding user response：

you could add margin-top:20px; to .color-stripblue

.color-stripred {
    display: block;
    height: 20px;
    width: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
}

.color-stripblue {
  margin-top:20px;
    display: block;
    height: 20px;
    width: 100%;
    background-color: blue;
    left: 0;
}

.color-stripgreen {
    display: block;
    height: 20px;
    width: 100%;
    background-color: green;
    left: 0;
}

    <div >
    </div>
    
    <div >
    </div>
    
    <div >
    </div>