When i set div position absolute then below div come upon it why this happen?-CodePudding

When i set div position absolute then below div come upon it why this happen? on small screen the button comes upon the div why this happen, and also i want that in small mobile screen the div box width to full browser screen

.qa-part-q-view {
 border-radius:5px;
border: solid #EBF2F7;
min-height:70px; 
align-items:left; 
padding:10px;10px; 
margin: 10px 10px;}  

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
.qa-part-q-view {
content: " ";
 z-index: -1;
 
border: 2px solid #EBF2F7; 
 }

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
.qa-part-q-view {
content: " ";
position: absolute;
z-index: -1;
left: 0px;
right: 0px;
border: 0 none #ccc;
border-bottom: 5px solid #EBF2F7;
border-top: 5px solid #EBF2F7;
border-radius: 0;
padding:10px;10px; 
 margin: 0;
 }
}

<div ><p>jjjjjjjjjj</p> </div>
 <button>kkkfkf</button>

CodePudding user response：

Related to the button-width: css:

.qa-part-q-view {
 border-radius:5px;
border: solid #EBF2F7;
min-height:70px; 
align-items:left; 
padding:10px;10px; 
margin: 10px 10px;}  

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
.qa-part-q-view {
content: " ";
 z-index: -1;
 
border: 2px solid #EBF2F7; 
 }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
.qa-part-q-view {
content: " ";
position: absolute;
z-index: -1;
left: 0px;
right: 0px;
border: 0 none #ccc;
border-bottom: 5px solid #EBF2F7;
border-top: 5px solid #EBF2F7;
border-radius: 0;
padding:10px;10px; 
 margin: 0;
 }
}

button {
width: 100vw;
}

html:

<div ><p>jjjjjjjjjj</p> </div>
 <button>kkkfkf</button>

my result: screenshot

CodePudding user response：

If you want to set the box with equal to the browser screen-width, use:

width: 100vw;