Как предотвратить фиксированный позиционный элемент, перекрывающий другие элементы в css?

Скажем, у меня три div:

<div id="outer"></div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>

#one {
position:fixed;
top:0px;
left:0px;
}

#two {
width: 80%;
height:500px;
}

#three {
width: 80%;
height:500px;
}

Divs "два" и "три" кажутся перекрытыми div "one" из-за фиксированной позиции.

1) Каков наилучший способ сделать так, чтобы они не перекрывались?

2) Каков наилучший способ сделать так, чтобы мой фиксированный div занимал 100% высоты, даже если пользователь прокручивается вниз? (например, боковая панель, предотвращающая любые новые div, которые я хочу запускать на той же стороне, что и divs two и three). Использует ли лучший способ float для #two и #three?

Ответ 1

1

Добавив margin-left, вы можете убедиться, что длинный фиксированный div не перекрывает другие.

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2

Добавление bottom:0px; делает его высотой окна, потому что оно расширяется сверху вниз.

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

Примечание. Я также добавил гибкую ширину 20% в div #one, чтобы он отлично сочетался с двумя другими гибкими разделителями ширины.

Fiddle: http://jsfiddle.net/ZPRLd/

Ответ 2

Изменив положение с position: fixed; на position: sticky;, я решил проблему.

#one{
 position: sticky;    
}