子要素の幅を親要素より大きくしてみた

こんにちは。ペーターパンです。

 

コーディングしている際、子要素の幅を親要素より大きくしたい時、たまにありますよね。

そんな時は、下記のように親要素にposition:relative;を使用して、子要素にposition: absolute;を指定し、あとは子要素のleftとrightで、親要素の左右からはみ出す数値をマイナスで調整すればOKです。

 

〇親要素


.parent{

 position:relative;

}

 

 

〇子要素


.child{

 position: absolute;

 left:-100px;

 right:-100px;

}

 

上記の他にも、やり方は色々あると思いますが、参考までに。

以上、ペーターパンでした。

関連記事