时间戳

首页 > 解决方案 > 是否有可能在猫头鹰轮播项目上显示元素？

css - 是否有可能在猫头鹰轮播项目上显示元素？

问题描述

我创建了两个并排的猫头鹰轮播滚动元素。架构： 猫头鹰轮播模式

我想实现，价格项目描述有点超过猫头鹰轮播项目的边界。架构： 猫头鹰轮播模式 v2 有人可以使用 css 或 jquery 帮助解决这种情况。

编辑：我创建了副本。有两个猫头鹰元素。我想要 price:before 元素可见：

$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});
#container {
  width: 100%;
  height: 200px;
  background: blue;
  position: relative;
  float: left;
}
#banner_section_right {
  width: 70%;
  background: red;
  float: left;
}
#banner_section_left {
  width: 30%;
  background: green;
  float: left;
}
#banner_section_left .item {
  width: 100%;
  background: yellow;
}
#banner_section_left .item:before {
    width: 1em;
    background: yellow;
    top: 0;
    content: "";
    position: absolute;
    right: 100%;
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/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"/>
<div id="container">
  <div id="banner_section_right">
    <div class="slider">
      <div class="item">
        <p>
        Viens
        </p>
      </div>
       <div class="item">
        <p>
        Divi
        </p>
      </div>
      <div class="item">
        <p>
        Viens
        </p>
      </div>
       <div class="item">
        <p>
        Divi
        </p>
      </div>
    </div>
  </div>  
  <div id="banner_section_left">
    <div class="slider">
      <div class="item">
        <p>
        $1 000 000
        </p>
      </div>
    </div>
  </div>  
</div>

标签： csscarouselowl-carousel

解决方案

在此处输入图像描述

我有示例，您可以从中学习可能会帮助您实现您想要实现的目标。

html:

<div id="container">

  <div class="green"></div>
  <div class="red"></div>
  <div class="box"></div>

</div>

CSS：

#container{
  width: 100%;
  height: 200px;
  background: blue;
  position: relative;
}
div.green{
  background: green;
  display: block;
  height: 100px;    
}
div.red{
  background: red;
  display: inlinblock;
  height: 100px;
}
div.box{
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

看看这个 css 属性，transform: translateY(-50%);它可以将对象移到其他对象之上。

工作示例： http: //fiddlesalad.com/css/div-over-other-div

推荐阅读