34304

[code]

    .box {position: absolute;}
    
[/code]

とした要素の親要素の高さ（幅も？）がなくなるのを解消する  
一般的な(clearfixのような)方法はありませんか？

[html]

[code]

    <body>
        <div class="wrap">
          <div class="box_left">
            A
          </div>
          <div class="box_right">
            B
          </div>
        </div>
      </body>
    
[/code]

[css]

before---------------------------------------------

[code]

      *{
        margin: 0;
        padding: 0;
      }
    
      .wrap{
        background: gray;
        position: relative;
        margin: 30px;
      }
    
      .box_left{
        width: 200px;
        height: 200px;
        background: tomato;
        /*position: absolute;*/
      }
    
      .box_right{
        width: 150px;
        height: 150px;
        background: lime;
        /*position: absolute;*/
        right:0;
      }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/KDWBB.png)](https://i.stack.imgur.com/KDWBB.png)

after---------------------------------------------

[code]

    .box {position: absolute;}
    
[/code]

すると、

.wrap（グレー）の高さ（幅も？）がなくなる！  
↓↓↓

[code]

    *{
        margin: 0;
        padding: 0;
      }
    
      .wrap{
        background: gray;
        position: relative;
        margin: 30px;
      }
    
    
      .box_left{
        width: 200px;
        height: 200px;
        background: tomato;
        position: absolute;
      }
    
      .box_right{
        width: 200px;
        height: 200px;
        background: lime;
        position: absolute;
        right:0;
      }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/xQ2Ny.png)](https://i.stack.imgur.com/xQ2Ny.png)  
↑↑↑↑↑↑  
.wrap（グレー）の高さ（幅も？）がなくなる！


CC BY-SA 3.0
2017-04-26T15:08:35.537
34298
2017-04-26T22:56:52.003
2017-04-26T15:20:59.557
12297
12297
question
html css
position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか？


ないです。

`position: absolute` や `position: fixed` が指定された要素は、通常のレイアウト処理から除外されるため、
**あたかも要素が存在していないかのように** 後続要素や親要素がレイアウトされます。float
等とは異なり、親要素の枠の外にでも配置できますから、その高さを親要素に考慮させるというのは無理な話です。

要素を横に並べる用途で使いたい場合、親要素に height を指定したり、`position: absolute`
ではない要素も残すなどして、別途高さを確保しなければいけません。


CC BY-SA 3.0
2017-04-26T22:50:00.853
34304
2017-04-26T22:56:52.003
2017-04-26T22:56:52.003
8000
8000
34298
answer