Declared position fixed or absolute in block level elements

friends, I want to know that if I declared a div as a fixed / absolute position (without mentioning its width of 100% or something else of the width value), then why did it lose the default value? since I know its block level element that takes the full width of the viewport, so when I make it fixed or absolute position, why does it look like an inline block and why doesn't it gain the full width of the view?

<style>
div{background:red; padding:20px 0;/*width:100%*/}
 div.demo{position:fixed;top:0; left:0;background:olive; 
  /*width:100%;*/}
</style>

<body>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
 <div class="demo">lorem ipsum</div>
 <div>lorem ipsum</div>
 <div>lorem ipsum</div>
</body>
Run codeHide result
+4
source share
2 answers

: ; , , , ,

,

, , .

, div, width: 100%; .

<style>
div{background:red; padding:20px 0;/*width:100%*/}
 div.demo{position:fixed;top:0; left:0;background:olive; 
  width:100%;}
</style>

<body>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
 <div class="demo">lorem ipsum</div>
 <div>lorem ipsum</div>
 <div>lorem ipsum</div>
</body>
Hide result
+2
+1

Source: https://habr.com/ru/post/1662955/


All Articles