Javascript Css元素下的位置div

Javascript Css元素下的位置div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在创建一个公文包网站,但我无法在背景图像下的视口下放置大量文本元素,类为“textFull”。我认为z指数有点混乱,但我不确定。如果我能将渐变位置固定为“固定”,那也太好了 //在这里我生成随机背景图像 常量maxFiles=159; const randomEl=document.getElementByIdrandom; 随机函数{ var random=Math.floorMath.random*maxFiles+1; randomEl.style.backgroundImage=`

我正在创建一个公文包网站,但我无法在背景图像下的视口下放置大量文本元素,类为“textFull”。我认为z指数有点混乱,但我不确定。如果我能将渐变位置固定为“固定”,那也太好了

//在这里我生成随机背景图像 常量maxFiles=159; const randomEl=document.getElementByIdrandom; 随机函数{ var random=Math.floorMath.random*maxFiles+1; randomEl.style.backgroundImage=`url'image/${random}.jpeg`; } 随机分组; //我在哪里使用打字机插件 $document.readyfunction{ $“页眉”。打字{ 闪烁光标:false, selectedBackground:141414, 已选择文本:ffffff, 行动:[ {延迟:1000}, {键入:'你好'}, {延迟:1000}, {remove:{num:6,键入:'stepped'}}, {type:'Weclome'}, {延迟:1000}, {remove:{num:1,键入:'stepped'}}, {选择:{from:10,to:16}}, {延迟:1000}, {remove:{num:5,键入:'stepped'}}, {延迟:1000}, {键入:“lcome to my site.”, {type:}, {延迟:1000}, {type:我是Atanas Bobev}, {延迟:1000}, {remove:{num:12,键入:'stepped'}}, {延迟:1000}, {类型:30岁。}, {延迟:1000}, {remove:{num:13,键入:'stepped'}}, {延迟:1000}, {类型:web设计器。}, {选择:{从:26到:47} ] }; }; @字体{ 字体系列:TypeFont; src:urlfonts/Lobster-Regular.ttf; } *{边距:0;填充:0;过渡:1s;字体系列:TypeFont;溢出-y:auto;溢出-x:hidden} 头,体{ 身高:100%; 宽度:100%; } /*背景*/ 一个{ 位置:固定; 背景:线性梯度229deg,a1c4fd,c2e9fb,cfd9df,667eea,764ba2,e2d1c3,89f7fe,66a6ff,48c6ef,6f86d6,feada6,a3bded,6991c7,13547a,80d0c7,93a5cf,43434343000000,93a5cf,ff758c,868f96,596164,c79081,dfa579,09203f,96deda,50c9c3,29C,485563,3C72,2A598,93a5cf,ff758c,2197B6D; 背景尺寸:7400%7400%; 动画:背景400秒轻松无限; z指数:15; 不透明度:0.5; 宽度:100%; 身高:100%; -webkit动画:背景400秒轻松无限; -moz动画:背景400秒轻松无限; -o-动画:背景400秒轻松无限; 动画:背景400秒轻松无限; } @-webkit关键帧BackgroundGardClient{ 0% { 背景职位:0%83% } 50% { 背景职位:100%18% } 100% { 背景职位:0%83% } } @-moz关键帧BackgroundGardent{ 0% { 背景职位:0%83% } 50% { 背景职位:100%18% } 100% { 背景职位:0%83% } } @-o-关键帧背景{ 0% { 背景职位:0%83% } 50% { 背景职位:100%18% } 100% { 背景职位:0%83% } } @背景关键帧{ 0% { 背景职位:0%83% } 50% { 背景职位:100%18% } 100% { 背景职位:0%83% } } /*Jquery样式表*/ jquery脚本菜单{ 位置:固定; 高度:90px; 宽度:100%; 排名:0; 左:0; 边框顶部:5px实心316594; 背景:fff; -moz盒阴影:02px3px0pxrgba0,0,0,0.16; -webkit盒阴影:0 2px 3px 0px rgba0,0,0,0.16; 盒影:02px3px0pxRGBA0,0,0,0.16; z指数:999999; 填充:10px0; -webkit框大小:内容框; -moz框大小:内容框; 框大小:内容框; } .jquery脚本中心{ 宽度:960px; 保证金:0自动; } .jquery脚本中心ul{ 宽度:212px; 浮动:左; 线高:45px; 保证金:0; 填充:0; 列表样式:无; } .jquery脚本中心a{ 文字装饰:无; } .jquery脚本广告{ 宽度:728px; 高度:90px; 浮动:对; } .jquery脚本已清除{ 明确:两者皆有; 身高:0; } /*背景图像*/ 随机的{ 位置:固定; 背景位置:中心; 背景尺寸:封面; 背景重复:无重复; 左:0; 右:0; 底部:0; 保证金:自动; 最小宽度:100vw; 最小高度:100vh; 背景尺寸:封面; 背景重复:无重复; 背景位置:中心; z指数:-2; 字体大小:calc1vh+1vw; } 标题>跨距闪烁光标{ 显示:无; } /*带有打字机插件的标题*/ H1收割台{ z指数:15; 位置:绝对位置; 最高:50%; 左:50%; -webkit转换:翻译-50%,-50%; 转化:转化-50%,-50%; 背景色:ecf0f1; 颜色:黑色; 不透明度:0.7; -ms过滤器:progid:DXImageTransform.Mi 同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧同侧dollarum sit amet
您能否将提供的代码最小化,使其更适合具体问题?此外,当布局选择可能获得相同的结果时,请尽量避免使用z索引。它在第一次使用时效果很好,但随着网站的增长,它会带来问题。您已经特别指定了textFull类的绝对定位。它的行为完全符合规定。在背景图像下,我想你的意思是你希望元素在背景图像之后流动,占据整个页面的宽度和高度,这样当你滚动时,你会看到完整的文本。是这样吗?jme11我尝试删除position:absolute,但对我无效。