Question

我希望修复div的id，并使用position：fixed attribute

实现了

但div1下面的内容在滚动时与div1重叠。

我想在滚动时避免重叠。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="div1" style="position : fixed; padding: 5px 0 0 5px; height: 140px; width: 150px;">dsfdsfdsfsdfds</div>
    <br/><br/><br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfssfhskdfdsjfssfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    fhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>
    sfhskdfdsjfs
    <br/><br/>

</body>

</html>

Answer 1

你走了。

<强> WORKING DEMO

HTML：

<div id="div1" style="background: none repeat scroll 0 0 #ffffff; height: 29px;  margin-top: -8px;  padding: 5px 0 0 5px;  position: fixed; width: 240px;">dsfdsfdsfsdfds</div>
<br/><br/><br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfssfhskdfdsjfssfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
fhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>

希望这有帮助。

Answer 2

你想做这样的事吗？ DEMO

HTML：

<div id="div1" style="position : fixed; top:0; padding: 0px 0 0 0px; height: 50px; width: 100%; background: #FFF; opacity:1;">dsfdsfdsfsdfds</div>
<br/><br/><br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfssfhskdfdsjfssfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
fhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>

Answer 3

试试这个：

<div id="div1" style="position : fixed; top:0; padding: 0px 0 0 0px; height: 35px; width: 100%; background: #FFF; opacity:1;">dsfdsfdsfsdfds</div>
<br/><br/><br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfssfhskdfdsjfssfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
fhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>
sfhskdfdsjfs
<br/><br/>

滚动时内容重叠

3 个答案: