元素

Question

我正在创建投资组合网站但我有问题将div（带有大量文本）元素与class＆text; textFull＆＃39;在背景图像下，在视口下。我认为z-index有点乱，但我不确定。如果我可以将渐变位置修复为“固定”，那将会很棒。

How it looks like now image

In this case the overflow(scroll bar) is not responding and i can't scroll

＆＃13;

＆＃13;

// 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}}
                ]
            });
        });
		
		
		

＆＃13;

@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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

问题代码：

 .textFull{

            position:absolute;
             font-size: calc(2vh + 2vw);
            left:0vw;
            width:100vw;
            background-color: white;
            z-index:15;
        }

Answer 1

当您给出元素绝对定位时，您将其从文档流中拉出，以使其相对于未定位静态值（定位的默认值）的第一个父元素定位。

您需要做的是创建另一个允许您定位textFull元素的元素。这仍然可以通过绝对定位完成，但在下面的示例中，您可以看到它只是保留在普通文档中。此外，您还需要在身体以外的其他元素上设置背景图像，以便修复和允许滚动。

尝试在全屏模式下运行代码段以查看效果。

$(document).ready(function(){
  $('#header').typewrite({
    blinkingCursor:false,
    selectedBackground:"#141414",
    selectedText:"#ffffff",
    actions: [
      {delay: 300},
      {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}}
    ]
  });
});

@import url('https://fonts.googleapis.com/css?family=Lobster');

* {
  margin:0;
  padding:0;
  transition:1s;
  font-family: 'Lobster', cursive;
}

html, body {
  min-height:100vh;
  width:100vw;
}

/* Jquery stylesheet */
#jquery-script-menu {
  position: fixed;
  height: 90px;
  width: 100%;
  top: 0;
  left: 0;
  border-top: 5px solid #316594;
  background: #fff;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  z-index: 999999;
  padding: 10px 0;
  box-sizing:content-box;
}

/* The background image */
#random{
  position: fixed;
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100vw;
  height: 100vh;  
  background-size:cover;                     
  background-repeat:no-repeat;
  background-position:center center;    
  z-index:-2;
  font-size:calc(1vh + 1vw);
  background-image: url('http://www.caryinstitute.org/sites/default/files/public/images/podcasts/pc_trees_forest.jpg');
}

#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: backgroundGradient 400s ease infinite;
  z-index:-1;
  opacity:0.5;
  width:100%;
  height:100%;
}

@keyframes backgroundGradient {
  0% {
      background-position: 0% 83%
  }
  50% {
      background-position: 100% 18%
  }
  100% {
      background-position: 0% 83%
  }
}

.full-pg-center {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* header with typewriter plugin */
h1#header {
  background-color: #ecf0f1;
  opacity: 0.7;
  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);
}

#header > span.blinkingCursor{
  display:none;
}

.textFull {
  font-size: calc(2vh + 2vw);
  background-color: white;
}

<div id='random'></div>
<div id='an'></div>
<div id='jquery-script-menu'>Menu</div>
<div class="full-pg-center">
  <h1 id='header'>Hi. I'm Atanas Bobev</h1>
</div>
<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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrvautin/typewrite/master/dist/typewrite.min.js"></script>

这些是影响您的网页是否正常运行的其他一些因素：

HTML中的结构问题：

1. 元标记属于文档的头部。
2. 脚本标记必须放在头标记中，或者 （最好）在你的页面正文之前结束正文 （</body>）标记。
3. 只加载一个版本的jQuery（您的演示代码中有两个版本）。此外，您似乎正在为打字机效果加载两​​个单独的插件。

CSS问题：

1. 您正在尝试在CSS中设置head元素的样式。不要那样做。 ： - ）
2. 您的规则中有很多重复属性。这本身不会导致问题（除非它们存在冲突），但是修复问题和维护代码将更加困难。例如，在#random元素的规则集中，您将重复两次背景属性。
3. 您不需要为前缀的大部分值添加前缀。例如，自2010/2011年以来，几乎每个浏览器都支持box-shadow而没有前缀。维护这是不必要的额外代码。
4. 您使用大多数尺寸的视口单元都很好，但它们使用不一致。您应该仔细检查多个设备尺寸的网站，以确保您获得了预期的结果。此外，您可以大大简化字体大小。不知道为什么你要将一些字体设置为2vh + 2vw。也许您正在寻找的是：vmax / vmin单位。

您可能需要重新考虑动画渐变叠加层。非常复杂的渐变，不透明度设置和无限动画的组合在CPU上可能很重。使用Chrome中的开发人员工具，测试可能减少影响的不同方法。您可以从简化渐变开始（例如将其缩小为三种颜色）。我也会尝试使用rgba值作为渐变停止而不是opacity属性。此外，您可以尝试使背景尺寸更小。

祝你好运。