Question

目前我正在建立一个网站。我将图像输入到div中，然后将图像文本叠加以描述它。我把文字放在图像上，然后放入不透明度.5。我的代码的问题是文本不会滚动。滚动显示，但不起作用。

我的HTML

    <!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <style type="text/css">
    <!--
        body {
        margin: 0px;
        }
    -->
    </style>
</head>
<body>
<div id="wrapper">
    <div id="background">
        <h10>.</h10>
    </div>
    <div id="header">
        <div id="logobackground">
            <img src="http://localhost/cabinchic/logo.png">
        </div>
        <div id="navbar">
            <a href="http://localhost/cabinchic/home.html">
                <div id="homebutton">
                    <h1> Home </h1>
                </div>
            </a>
            <a href="http://localhost/cabinchic/homedecor.html">
                <div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
                    <h1> Home Decor </h1>
                </div>
            </a>
            <a href="http://localhost/cabinchic/askheather.html">
                <div id="askheatherbutton">
                    <h1> Ask Heather </h1>
                </div>
            </a>
        </div>
    </div>

    <div id="leftbox">
    </div>

    <div id="mainbox">
        <div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
            <div class="text">
                <h1> 26473264738654356427564  gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
            </div>
        </div>
    </div>

    <div id="footer">
        <div id="footerborder">
            <h10>.</h10>
        </div>
        <center>
            <img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
            <div id="footertextcr"> <h1>All Rights Reserved &copy 2014 Python Daily</h1> </div>
            <div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
        </center>
    </div>
</div>
</body>
</html>

我的CSS

/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}

#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}

#header {
height: 100%;
width: 100%;
position: fixed;
}

#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}

#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}

#homebutton:hover {
color: #00693E;
border-radius: 8px;
}

#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}

#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}

#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}

#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}

#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%; 
}

#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}

.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}

.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}

#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}

#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}

#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}

#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}

a, u {
    text-decoration: none;

}

很抱歉，CSS代码中没有间距，它没有正确粘贴...

Answer 1

问题＃1：
您的标题高度为100％，宽度为100％，并固定在页面上，从而覆盖div和滚动条并删除滚动功能。
问题＃2：
文本的容器#mainbox的z-index为-1，因此将它和它的子项放在其他所有内容之后：

#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}

JSFiddle Demo

HTML Div Wont Scroll

1 个答案: