cssで上のdivの影響を受けないようにしたい。

Question

cssにていくつものdivで囲んでいる時に親の影響を受けないようにしたいのですが方法はあるでしょうか？

<div class="container">

  <div class="imf">
        小要素のテキスト
  </div>
  <div class="slider">
      
      <div class="chileslider">
        小要素のテキスト
      </div>
  </div>
  

</div>

.container {
    margin-top: 10px;
    width:80%;

}

.imf {
        position: relative;
	width: 100%;
}

とあった場合に、
imfをcontainerのwidth:80%;に影響されずに画面いっぱいwidth100%で表示したいのですが、
imfクラスだけcontainerのcssに影響されない方法、うまく表示させる方法などあるでしょうか？
ここにはとりあえずのコードしか載せてないですが、imfに当たる部分にはjsのフェードインフェードアウトの画像が切り替わるのを配置してるので
position: relative;
width: 100%;
を入れてあります。

よろしくお願いします。

Comments

[think49]

.parentに対応する要素がありませんが、.parentは.containerが正しいのでしょうか。tkturboさんへの返答を読んだところでは、.container {margin: 10px auto;} が指定されていそうですが、いかがですか。質問文のコードでは左寄せなのでtkturboさんの回答で問題ないように読めます。

[sssshin]

すみませんtaretailの質問ように簡単なのコピペしてちょっと修正を自分でしててparentの部分をcontainerにし忘れてました。
ご指摘通りにcontainerです。ありがとうございます。
修正しておきます。

Answer 1

.parent {
    margin-top: 10px;
    width:80%;
}

.imf {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

上記のようにすると、一応お望みのレイアウトになるかと思います。
単位にvwを使っていますので、Android4.4+、IE9+という制限がかかりますのでご注意ください。

Android4.3以下、IE8以下も対象とするなら、
横100%にしたいコンテンツは親のコンテナから外に出すのが定石です。

ちなみに、親コンテナの左右が例えばpadding-left:20px; padding-right: 20px
のように固定サイズの余白になっているのであれば、
子要素にmargin-left:-20px; margin-right: -20px;とネガティブマージンを設定して
左右の余白分を相殺することでも実現できます。

参考までに。

Comments

[sssshin]

ありがとうございました！綺麗にできました！

Answer 2

きれいなやり方ではないので、好みが分かれるとは思いますが、こういった方法もあります。

親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック

<div class="parent">
  ddd
  <div class="imf">
    aaaaaaaaaaaa
  </div>
</div>

html {
  overflow: auto;
}

body{
  overflow-x: hidden;
  position: relative;
}

.parent {
  width: 800px; /*仮*/
  margin: 0 auto;
  background: #ccc;
}

.imf {
  background: rgba(200, 10, 10, .2);
  margin: 0 -500%;
  padding: 0 500%;
  width: 100%;
}

上リンクに説明が詳しいです。

Comments

[sssshin]

ありがとうございます。勉強になります！！

Answer 3

あまり解決になってないかもですが、

.imf {
    width:125%;
}

で親の80%に対する125%＝結果的に100%のwidthは確保できます。

Comments

[sssshin]

回答ありがとうございます。

すみません書き忘れてましたがwidthの比率を上げるというのは試したのですが、右側に大きくなるだけで、左側のスタートがcontainerに合わさってるのでバランスがおかしくなります。
その時margin-leftでマイナスでpxで数値指定して変になりました。