CSS] 레이어 플로팅 (사이드바)

사이드바 형태로 레이어를 플로팅 해야 될때가 종종 생깁니다
기존에 알려진 방식은 레이어 나누기가 대부분 인데요


분할레이어의 예

레이어1

레이어2

분할을 사용하지 않고 오버레이 형태로 띄워야 하는 경우가 있습니다
주로 position 속성을 주어서 구현하곤 합니다, absolute 가 가장 많이 사용됩니다
다만 이 태그를 사용할때 엘리먼트의 높이가 적용이 안되는것이 매우 흠 입니다
작성해본바 가장 괜찮은 relative 를 사용한 구현을 보겠습니다 [ position:relative ]
마찬가지로 두 레이어중 하나가 더 길어지더라도 높이에 맞추어 집니다
left 와 width 를 조절해서 크기를 바꾸어 주고, left 를 0으로 하여 숨길 수 있습니다

<div style="white-space:nowrap;overflow:hidden">
<div style="width:100%;background:#eee;vertical-align:top;display:inline-block">레이어1 ---------------------------------------------------------------- 레이어2 는 떠있습니다</div><div style="position:relative;left:-50%;width:50%;background:rgba(102,221,255,.5);vertical-align:top;display:inline-block"><br>레이어2</div>
</div>
<div>또한 엘리먼트 높이도 살아 있습니다</div>

레이어1 ---------------------------------------------------------------- 레이어2 는 떠있습니다

레이어2

또한 엘리먼트 높이도 살아 있습니다