【发布时间】：2018-03-06 16:26:12
【问题描述】：
我正在创建投资组合网站，但在视口下的背景图像下定位具有“textFull”类的 div（包含大量文本）元素时遇到问题。我认为 z-index 有问题，但我不确定。如果我可以将渐变位置固定为“固定”，那就太好了。
In this case the overflow(scroll bar) is not responding and i can't scroll
// where i generate random background image
const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
var random = Math.floor(Math.random() * maxFiles)+1;
randomEl.style.backgroundImage = `url('image/(${random}).jpeg')`;
}
randombg();
//where i use typewriter plugin
$(document).ready(function(){
$('#header').typewrite({
blinkingCursor:false,
selectedBackground:"#141414",
selectedText:"#ffffff",
actions: [
{delay: 1000},
{type: 'Hello.'},
{delay: 1000},
{remove: {num: 6, type: 'stepped'}},
{type: 'Weclome '},
{delay: 1000},
{remove: {num: 1, type: 'stepped'}},
{select: {from: 10, to: 16}},
{delay: 1000},
{remove: {num: 5, type: 'stepped'}},
{delay: 1000},
{type: 'lcome to my site. '},
{type: '<br>'},
{delay: 1000},
{type: "I'm Atanas Bobev"},
{delay: 1000},
{remove: {num: 12, type: 'stepped'}},
{delay: 1000},
{type: "30 years old."},
{delay: 1000},
{remove: {num: 13, type: 'stepped'}},
{delay: 1000},
{type: "web designer."},
{select: {from: 26, to: 47}}
]
});
});
@font-face {
font-family:TypeFont;
src: url(fonts/Lobster-Regular.ttf);
}
*{margin:0;padding:0;transition:1s;font-family:TypeFont;overflow-y:auto;overflow-x:hidden}
html,head,body{
height:100%;
width:100%;
}
/* The background gardient */
#an{
position:fixed;
background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
background-size: 7400% 7400%;
animation: backgroundGardient 400s ease infinite;
z-index:15;
opacity:0.5;
width:100%;
height:100%;
-webkit-animation: backgroundGardient 400s ease infinite;
-moz-animation: backgroundGardient 400s ease infinite;
-o-animation: backgroundGardient 400s ease infinite;
animation: backgroundGardient 400s ease infinite;
}
@-webkit-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@-moz-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@-o-keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
@keyframes backgroundGardient {
0% {
background-position: 0% 83%
}
50% {
background-position: 100% 18%
}
100% {
background-position: 0% 83%
}
}
/* Jquery stylesheet */
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
/* The background image */
#random{
position:fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100vw;
min-height: 100vh;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
z-index:-2;
font-size:calc(1vh + 1vw);
}
#header > span.blinkingCursor{
display:none;
}
/* header with typewriter plugin */
h1#header{
z-index:15;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ecf0f1;
color: black;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
border: 20px solid #ecf0f1;
font-size: calc(2vh + 2vw + 1vmax + 0.5em);
font-weight: 100;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* The problem div */
.textFull{
position:absolute;
font-size: calc(2vh + 2vw);
left:0vw;
width:100vw;
background-color: white;
z-index:15;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<meta charset='utf-8'>
<script type="text/javascript" src="script/typeout.min.js"></script>
<script type="text/javascript" src="script/typewrite.min.js"></script>
<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="script/typewrite.js"></script>
<head>
<style>
</style>
</head>
<body id='random'>
<div id='an'></div>
<h1 id='header'>Hi. I'm Atanas Bobev</h1>
<div class='textFull'>Lorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit amet</div>
<script>
</script>
</body>
</html>问题代码：
.textFull{
position:absolute;
font-size: calc(2vh + 2vw);
left:0vw;
width:100vw;
background-color: white;
z-index:15;
}
【问题讨论】：
-
您能否将提供的代码最小化以更针对具体问题？此外，当布局选择可能产生相同的结果时，尽量避免使用 z-index。它在第一次使用时效果很好，但随着网站的增长，它会导致问题。
-
你已经专门给了 textFull 类绝对定位。它的行为与指定的完全相同。通过“在”背景图像下，我认为您的意思是您希望元素在占据整个页面宽度和高度的背景图像之后流动，这样当您滚动时您会看到完整的文本。对吗？
-
jme11 我尝试删除 position: absolute 但它对我不起作用。
标签： javascript jquery html css