猫头鹰轮播物品绝对位置答案

【问题标题】：Owl carousel item absolute position猫头鹰轮播物品绝对位置
【发布时间】：2016-08-03 21:26:50
【问题描述】：

我正在尝试在项目 div (owl carousel) 中显示具有绝对位置的 div。但不工作。

$("#owl-demo").owlCarousel({pagination:false});

body{height:500px}

#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

#no-owl{margin-top:30px}

#no-owl .item{
  background: #3fbf79;
  padding:10px;
  width:45%;
  position:relative;
  display:inline-block;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#no-owl .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>
<div>Owl carousel</div>
<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
  <div>No carousel</div>
<div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
</div>
  </body>

如何在不添加轮播高度的情况下显示绝对内容：https://jsfiddle.net/Ljz7c8fg/1/

【问题讨论】：

标签： javascript jquery html css owl-carousel

【解决方案1】：

你需要设置：

bottom: 0px;

开：

#no-owl .show

【讨论】：

没有错。 #no-owl 只是一个演示，我想在 owl-carousel 中展示什么
那么你想要item div里面的绝对div宽度为100%，相对div的高度为100%吗？ #owl-demo .show{ 位置：绝对；边距底部：0；左：0px；上：0px；右：0px；下：0px；显示：块；填充：10px；背景：红色； }
就像No carousel 演示一样。

【解决方案2】：

问题是由“.owl-carousel .owl-wrapper-outer”中的“溢出：隐藏”引起的。如果你给它一个高度问题就会解决（但我认为高度应该是自动计算的，我的意思是轮播的高度应该等于最高的轮播项目。）。您可以使用 Javascript 来解决您的问题吗？

【讨论】：

或检查这个！这是您的问题的肮脏修复：stackoverflow.com/questions/36201595/…。不要忘记在你的身体或轮播的外部容器中添加溢出-y：隐藏。
我知道但看到了这个jsfiddle.net/Ljz7c8fg，我不想添加px/% 高度，因为.show 的内容是动态的，每个项目的高度都不相同。我想你明白了。
好的，所以你必须使用 Javascript 计算最高轮播项目的高度，然后给 .owl-wrapper-outer 这个高度。
好的，但没有解决。我不想让你知道我是否有两个 div 上下，它只会增加我不想要的两个 div 之间的距离。
嗯我不太明白这个问题。所以:-)溢出会阻止你在轮播之外显示内容，所以你唯一的方法就是给你的外包装一个高度。根据您的标记，您必须知道项目下有哪些元素，以便计算整个高度：这个 Fiddle 修复了您首先发布的问题：jsfiddle.net/Marouen/nu8zwL86

【解决方案3】：

$("#owl-demo").owlCarousel({pagination:false});

$("#owl-demo .item, #no-owl .item").hover(function(){
    $(this).find('.show').show();
    }, function(){
    $(this).find('.show').hide();
});

body{overflow-x:hidden !important;height:500px}
#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:none;
  padding:10px;
  background:red;
}

#no-owl{
   padding:30px;
   display:block;
   background:blue;
   color:white
}

.owl-carousel .owl-stage-outer {position:relative !important;overflow:hidden !important}

.owl-carousel .owl-wrapper-outer {width:100% !important;position:relative !important;overflow:visible !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>

<div id="no-owl">
Some Content
</div>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
Some Content
</div>

</body>

【讨论】：