2 qqbnb889 qqbnb889 于 2016.09.11 20:23 提问

div fixed定位之后,加animation,被父元素遮盖,如何取消,内详

下面有完整代码,一个网上摘得轮播插件,文字跟图片同时出现,以文字加到图片子元素中,但是位置不同,所以用fixed解决,但是后续中我给文字加animation后,文字被图片遮盖,只能在动画播放完才能出现,求大大们解决~
下面有代码。。和图片事宜,图片画质有点渣
图片说明完整代码。。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>an</title>
<script src="../web/js/jquery-3.1.0.js"></script>
  <script>
   $(document).ready(function() { 
  var length, 
   currentIndex = 0, 
   interval, 
   hasStarted = false, //是否已经开始轮播 
   t = 3000; //轮播时间间隔 
  length = $('.slider-panel').length; 
  //将除了第一张图片隐藏 
  $('.slider-panel:not(:first)').hide(); 
  //将第一个slider-item设为激活状态 
  $('.slider-item:first').addClass('slider-item-selected'); 
  //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 
  $('.slider-panel').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  $('.slider-item').hover(function(e) { 
   stop(); 
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { 
   start(); 
  }); 
  $('.slider-pre').unbind('click'); 
  $('.slider-pre').bind('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  /** 
   * 向前翻页 
   */
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 向后翻页 
   */
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 从preIndex页翻到currentIndex页 
   * preIndex 整数,翻页的起始页 
   * currentIndex 整数,翻到的那页 
   */
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
    .parent().children().eq(currentIndex).fadeIn(1000); 
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  /** 
   * 开始轮播 
   */
  function start() { 
   if(!hasStarted) { 
    hasStarted = true; 
    interval = setInterval(next, t); 
   } 
  } 
  /** 
   * 停止轮播 
   */
  function stop() { 
   clearInterval(interval); 
   hasStarted = false; 
  } 
  //开始轮播 
  start(); 
 }); 
  </script>
  <style>
   @keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
@-moz-keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
@-webkit-keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
  * {
            margin: 0;
            padding: 0;
            height:100%;
            box-sizing: border-box;
            overflow: hidden;
        }
a{
    text-decoration:none
    }
    .slider { 
 position:fixed;
    top:7.77%;
    left:58.3333%;
    width:33.3333%;
    height:88%;
    z-index:1;
 } 
  .img1{
    max-width:100%;
    max-height:100%;
    background-image:url(http://img2.imgtn.bdimg.com/it/u=3224860512,2623772592&fm=206&gp=0.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0 auto;

    }
.img2{
    max-width:100%;
    max-height:100%;
    background-image:url(http://img5.imgtn.bdimg.com/it/u=4106917366,2081124773&fm=206&gp=0.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0 auto;  

    }
.word{
     position:fixed;
    color:#333;
    margin-left:10px;
    font:92px/100px Futura;
    letter-spacing:8px;
    top:33%;
    left:24.5%;
    height:200px;
    animation:myfirst 2s;
    } 
  </style>
</head>

<body>
 <div class="slider"> 
  <ul class="slider-main"> 
   <li class="slider-panel img1"> 
    <a href="h#"><span class="word">WORD ANIMATE</span></a> 
   </li> 
   <li class="slider-panel img2"> 
    <a href="h#"><span class="word">DO<br />DESGIN</span></a> 
   </li> 
  </ul>
  </div> 
  <div id="chose"> 
   <ul class="slider-nav"> 
    <li class="slider-item"></li>
    <li class="slider-item"></li> 
   </ul>    
  </div> 
</body>
</html>

3个回答

qqbnb889
qqbnb889   2016.09.12 00:36
已采纳

我给overflow: hidden;样式去掉,确实不隐藏了,但是会出现侧边下滑条,影响我的布局,这是怎么回事

zuoyifeng1993
zuoyifeng1993 代码可以分开,你的字体的盒子在外面才可以,你在ul上overflow: hidden;控制你的布局
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.09.11 21:12

去掉下面这个样式的 overflow: hidden;,被隐藏了


        * {
            margin: 0;
            padding: 0;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
showbo
showbo 回复qqbnb889: 不要全部设置所有元素,就是不要使用*选择器。要针对性的对某些需要隐藏的元素才使用。全部overflow:hidden到时出问题了有得你找的
接近 2 年之前 回复
qqbnb889
qqbnb889 overflow问题解决了
接近 2 年之前 回复
qqbnb889
qqbnb889 我给overflow: hidden;样式去掉,确实不隐藏了,但是会出现侧边下滑条,影响我的布局,这是怎么回事
接近 2 年之前 回复
qqbnb889
qqbnb889 感谢回答,再问下为什么这个css3动画移动结束的时候会卡顿一下。。有解决方法吗
接近 2 年之前 回复
zuoyifeng1993
zuoyifeng1993   2016.09.12 09:33

106行
{
margin: 0;
padding: 0;
height:100%;
box-sizing: border-box;
/*overflow: hidden;*/
}
又想要限制高度,你的字体的盒子在外面才可以,你在ul上overflow: hidden;控制你的布局

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。
父元素overflow: hidden;子元素position: fixed;子元素溢出部分居然不显示。
position:fixed的元素定位到滚动区域,会被覆盖
目的 想让position:fixed 的元素定位在页面底部 问题 华为、oppo旧款手机上会被覆盖 原因 误将position:fixed 的元素定位在滚动区域中 解决 position:fixed 的元素定位根元素body上 问题说明 起初遇到这个问题实在是没想到是定位,找了很久才发现…以后还是乖乖滴把footer fixed 在body上吧
父元素设置absolute或relative,子元素设置fixed定位失效
fixed相对于body进行的窗口定位,而不是相对于父元素absolute或relative,所以当你想让fixed定位在窗口位置并且是相对于父元素的那只有一个办法就是把父元素设置为absolute或relative的同时子元素不设置任何的top、left、bottom、right。
父级overflow为scroll时,绝对定位的子元素会被隐藏或一起滚动
需求:父级边框固定,里面的内容滚动 由于是图片边框,于是我把边框的上下部分单独切图,中间重复部分平铺 想要的效果图: 一开始的写法: html: div class="paradise-wrap"> div class="paradise">div> div> css: .paradise-wrap{ position: relativ
关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更复杂的排版要求,可以考略使用其他方法,比如使用相对定位和绝对定位。 在这篇文章中,我们首先要讨论元素浮动;然后,我们要讨论如何使用x,y和z轴控制元素的位置。   元素浮动
z-index无效,无论设置多大都被其他的元素覆盖
z-index问题 .test-div{ border:1px blue solid; width:300px; min-height:100px; position:relative; -z-index:0; font-size:18px; font-family:microsoft yahe;
子元素absolute定位时父元素有无relative的区别
Html <div id="father"> <div class="son"></div> </div>2.Css–父元素没有relative.son{ width: 50px; height: 50px; background-color: yellow; position: absolute
绝对定位:子元素进行了绝对定位会不会跳出父级元素。
绝对定位(position:absolute)       根据前天所学,给某个元素进行绝对定位后,如果没有相近的拥有定位属性的父级元素,那么它就定位就是跟据整个document来定位,而且脱离了文档流。       假设:一个div里包含了一个span标签,只对span标签进行绝对定位,让它跑到div块的外面去,看看是否能成功。 代码:    给它加个样式:body{
fixed不以body定位,相对于父级容器定位问题
fixed不以body定位,相对于父级容器定位问题经常在做一个页面的时候,希望一个元素不希望随着滚动条的滚动而动,这个时候就要用到fixed了 但是又不希望它根据整个窗口的左右两边定位(因为如果分辨率变小了,它与中间页面的距离就会变了) 希望达到的效果如下图所示 解决方法:只需要使用margin定位就可以了如图,最先开始使用left,right进行定位 两个按钮是写在中间内部页面里面的 效
overflow不一定能隐藏元素(position:absolute)
为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文。但是,很多人对这个属性       为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文。        但是,很