水平图像响应图像的叠加

时间：2015-10-14 05:08:57

标签： html css

我正在尝试在水平图库中为响应式图像创建叠加层。 div中的重叠li具有position和大z-index值，但仍显示在图片的背景上。 当我为absolute更高的图片尝试z-index时，图像的水平滚动失败。

请参阅演示：Jsfiddle 

html,
body {
  min-height: 100%;
  height: 100%;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
#thumbsList {
  height: 76%;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  line-height: 0px;
  top: 13%;
  left: 80px;
  list-style-type: none;
  top: 13%;
  position: absolute;
}
#thumbsList li {
  display: inline;
  position: relative;
}
#thumbsList li img {
  max-width: 100%;
  height: 100%;
  transition: all 0.8s ease;
}
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.backStrip {
  background-color: #2d2d2d;
  border-bottom: 1px solid #1a1a1a;
  height: 35px;
  position: relative;
  z-index: 22;
  position: fixed;
  width: 253px;
  top: 43px;
  height: 79px;
  left: 85px;
}
#infoText {
  color: white;
  font-style: italic;
  padding-top: 10px;
  float: right;
  margin-right: 10px;
  font-family: sans-serif;
  font-size: 12px;
}
#mainContainer {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 8px solid #2D2D2D;
  margin: 0px;
  overflow-x: auto;
}
#thumbsButtons {
  list-style: none;
  position: fixed;
  bottom: 6%;
  left: 46%;
  z-index: 22;
}
#counterContainer {
  position: fixed;
  bottom: 5%;
  left: 50%;
  right: 50%;
  font-family: verdana;
  font-weight: bold;
  width: 100px;
}
#thumbsButtons li {
  float: left;
  margin-left: 11px;
  font-size: 16px;
  font-family: verdana;
}
#thumbsButtons li:hover {
  cursor: pointer;
}
#nextArrow {
  position: fixed;
  right: 10px;
  top: 43%;
  z-index: 13333;
  font-size: 100px;
  color: white;
  font-family: helvetica;
  cursor: pointer;
}
#sidelogo {
  position: absolute;
  z-index: 10;
  top: 35%;
  left: 0%;
  width: 67px;
  height: 258px;
  background-color: #2D2D2D;
}
.headerInfo {
  position: absolute;
  bottom: 22px;
  color: white;
  z-index: 333;
  font-family: verdana;
  font-size: 17px;
  text-align: center;
}
.thumbOverlay {
  position: absolute;
  z-index: 13111133;
  background-color: black;
  color: white;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  display: inline;
}
<div id="mainContainer">
  <div class="backStrip"> <span id="infoText">Written By Banmeet Singh</span>

  </div>
  <ul id="thumbsButtons"></ul> <span id="nextArrow">></span>
  <span id="sidelogo">Thinking Forward</span>

  <ul id="thumbsList">
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span>

    </li>
    <li>
      <div class="thumbOverlay"><span>adasd</span> 
      </div>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" />
    </li>
    <li>
      <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" />
    </li>
  </ul>
  <div id="counterContainer">3 of 10</div>

检查第二张图像。我已经添加了叠加层。

5 个答案:

答案 0 :(得分：2)

#thumbsList li {
    display: inline-block;
    position: relative;
}
你期待这种结果吗？ 见jsFiddle

答案 1 :(得分：2)

检查出来：https://jsfiddle.net/r6hho2sL/11/

这里我对你的代码进行了一些修改：
1。我使用JQuery在窗口重新调整大小事件上调整overlay元素的宽度，以便它保持响应行为

$( window ).resize(function() {
  $( ".thumbOverlay" ).width($(".forward").width());
});
$( ".thumbOverlay" ).width($(".forward").width());

  1. 我用（divs和span）代替list（ul和li）

  2. 我修改了css类

    .thumbOverlay {
    top: 0;
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    display: inline;
}

#thumbsList span {
display: inline;
margin-left: -4px;
}

答案 2 :(得分：2)

不幸的是，Marc Andre，你的小提琴代码相当漏洞和不一致。因此，我没有修补和重新安排，而是采取从头开始尽可能接近原始想法的自由。

如需快速查看，请查看CODEPEN上的笔Responsive filmstrip and thumblist

你在哪里出错？ 首先，我不打算挑剔你，我只是诚实：

您没有在元素上正确使用“位置”，这可能会导致屏幕输出混乱（我猜）。

两个一般规则：

1） parent-element =＆gt; position：relative，child-element =＆gt;位置：绝对。 两者都可以具有任何类型的宽度/高度（％，px），但子值相对于父元素。

2） child-element =＆gt;位置：固定。宽度/高度/位置相对于浏览器窗口，总是。

你混合了这两条规则，让自己在圈子里跑。要挣脱你应该：

justify-content: space-between

#thumbslist （仅限尺寸，样式等）不需要进一步“位置”。 遗憾的是，由于（逻辑）错误的数量，您的CSS需要重新设计（恕我直言）。

<强>更新

正如您可能已经看到的那样，代码适用于Codepen并且在最新的IE11，FF和CH中都是独立的（所有W7，我仍然需要检查移动设备）。

我基本上创建的是一叠堆叠的flexbox布局图层。一旦掌握了flexbox技术，您就会发现它比常规（内联）块技术具有许多优势。还有缺点，我会在适用的地方指出它们。

为了轻松理解我的（非常实际的）flexbox工作流程，我总是问我需要什么样的基本布局：

  • 一列行或一列
  • 包装或不包装
  • 理由（通常为{{1}}，您可能需要阅读此内容）

嵌套和诡计将在稍后出现......

解析您的要求：您实际上需要一个常规网页，但不需要放置好的块，而是需要堆叠，因此需要图层

答案 3 :(得分：1)

为什么会这样？

z-index这不是问题，因为.thumbOverlay堆叠在图片顶部。问题是.thumbOverlay的百分比为height，这意味着它将占用其容器的完整height。在这种情况下，容器是li，已设置为display: inline;，因此其高度将与其线框一样高。

你能做什么？

要使叠加层正常工作，您需要height: 100%;来计算正确的height。

方法1：使列表项成为内联块

如果您制作了li display: inline-block;，那么您就可以设置height。

  • 在display: inline;
    • 上将display: inline-block;更改为#thumbsList li
  • 将height: 100%;添加到#thumbsList li，以li height成为ul
  • 将max-width: 100%;更改为max-width: calc(100vw - 96px);上的#thumbsList li img。这将确保img占据视口的整个宽度，减去应用于border和position的{​​{1}}和#mainContainer 

#thumbsList
html, body {
    min-height: 100%;
    height: 100%;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
#thumbsList {
    height: 76%;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 0px;
    top: 13%;
    left: 80px;
    list-style-type: none;
    top: 13%;
    position: absolute;
}
#thumbsList li {
    /*display: inline;REMOVE THIS*/
    display: inline-block; /*ADD THIS*/
    height: 100%; /*ADD THIS*/
    position: relative;
}
#thumbsList li img {
    /*max-width: 100%; REMOVE THIS*/
    max-width: calc(100vw - 96px); /*ADD THIS*/
    height: 100%;
    transition: all 0.8s ease;
}
.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.backStrip {
    background-color: #2d2d2d;
    border-bottom: 1px solid #1a1a1a;
    height: 35px;
    position: relative;
    z-index: 22;
    position: fixed;
    width: 253px;
    top: 43px;
    height: 79px;
    left: 85px;
}
#infoText {
    color: white;
    font-style: italic;
    padding-top: 10px;
    float: right;
    margin-right: 10px;
    font-family: sans-serif;
    font-size: 12px;
}
#mainContainer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 8px solid #2D2D2D;
    margin: 0px;
    overflow-x: auto;
}
#thumbsButtons {
    list-style: none;
    position: fixed;
    bottom: 6%;
    left: 46%;
    z-index: 22;
}
#counterContainer {
    position: fixed;
    bottom: 5%;
    left: 50%;
    right: 50%;
    font-family: verdana;
    font-weight: bold;
    width: 100px;
}
#thumbsButtons li {
    float: left;
    margin-left: 11px;
    font-size: 16px;
    font-family: verdana;
}
#thumbsButtons li:hover {
    cursor: pointer;
}
#nextArrow {
    position: fixed;
    right: 10px;
    top: 43%;
    z-index: 13333;
    font-size: 100px;
    color: white;
    font-family: helvetica;
    cursor: pointer;
}
#sidelogo {
    position: absolute;
    z-index: 10;
    top: 35%;
    left: 0%;
    width: 67px;
    height: 258px;
    background-color: #2D2D2D;
}
.headerInfo {
    position: absolute;
    bottom: 22px;
    color: white;
    z-index: 333;
    font-family: verdana;
    font-size: 17px;
    text-align: center;
}
.thumbOverlay {
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    /*display: inline; REMOVE THIS*/
}

https://jsfiddle.net/vhqg2zg3/2/

方法2：相对于列表进行叠加

如果您相对<div id="mainContainer"> <div class="backStrip"> <span id="infoText">Written By Banmeet Singh</span> </div> <ul id="thumbsButtons"></ul> <span id="nextArrow">></span> <span id="sidelogo">Thinking Forward</span> <ul id="thumbsList"> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span> </li> <li> <div class="thumbOverlay"><span>adasd</span> </div> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /> </li> </ul> <div id="counterContainer">3 of 10</div> </div>提出.thumbOverlay位置，则可以从ul获得height。

  • 从ul移除position: relative;。这将阻止#thumbsList li与其相关
  • 从.thumbOverlay移除left: 0px;。这将确保其左侧位置保持在最初绘制的位置

.thumbOverlay
html, body {
    min-height: 100%;
    height: 100%;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
#thumbsList {
    height: 76%;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 0px;
    top: 13%;
    left: 80px;
    list-style-type: none;
    top: 13%;
    position: absolute;
}
#thumbsList li {
    display: inline;
    /*position: relative; REMOVE THIS*/
}
#thumbsList li img {
    max-width: 100%;
    height: 100%;
    transition: all 0.8s ease;
}
.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.backStrip {
    background-color: #2d2d2d;
    border-bottom: 1px solid #1a1a1a;
    height: 35px;
    position: relative;
    z-index: 22;
    position: fixed;
    width: 253px;
    top: 43px;
    height: 79px;
    left: 85px;
}
#infoText {
    color: white;
    font-style: italic;
    padding-top: 10px;
    float: right;
    margin-right: 10px;
    font-family: sans-serif;
    font-size: 12px;
}
#mainContainer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 8px solid #2D2D2D;
    margin: 0px;
    overflow-x: auto;
}
#thumbsButtons {
    list-style: none;
    position: fixed;
    bottom: 6%;
    left: 46%;
    z-index: 22;
}
#counterContainer {
    position: fixed;
    bottom: 5%;
    left: 50%;
    right: 50%;
    font-family: verdana;
    font-weight: bold;
    width: 100px;
}
#thumbsButtons li {
    float: left;
    margin-left: 11px;
    font-size: 16px;
    font-family: verdana;
}
#thumbsButtons li:hover {
    cursor: pointer;
}
#nextArrow {
    position: fixed;
    right: 10px;
    top: 43%;
    z-index: 13333;
    font-size: 100px;
    color: white;
    font-family: helvetica;
    cursor: pointer;
}
#sidelogo {
    position: absolute;
    z-index: 10;
    top: 35%;
    left: 0%;
    width: 67px;
    height: 258px;
    background-color: #2D2D2D;
}
.headerInfo {
    position: absolute;
    bottom: 22px;
    color: white;
    z-index: 333;
    font-family: verdana;
    font-size: 17px;
    text-align: center;
}
.thumbOverlay {
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    /*left: 0px; REMOVE THIS*/
    top: 0px;
    display: inline;
}

https://jsfiddle.net/pmuqvLpm/

值得注意的是，您当前缩放图像的方式会导致失真，因为它们无法保持纵横比。这是因为<div id="mainContainer"> <div class="backStrip"> <span id="infoText">Written By Banmeet Singh</span> </div> <ul id="thumbsButtons"></ul> <span id="nextArrow">></span> <span id="sidelogo">Thinking Forward</span> <ul id="thumbsList"> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> <span class="headerInfo">Josh Kloss</span> </li> <li> <div class="thumbOverlay"><span>adasd</span> </div> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/350x150" alt="Alternate Text" /> </li> <li> <img class="forward" src="http://placehold.it/200x100" alt="Alternate Text" /> </li> </ul> <div id="counterContainer">3 of 10</div> </div>缩放时图像的height保持静止。可能值得这样做： 

width
html, body {
    min-height: 100%;
    height: 100%;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
#thumbsList {
    height: 76%;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 0px;
    top: 13%;
    left: 80px;
    list-style-type: none;
    top: 13%;
    position: absolute;
}
#thumbsList li {
    /*display: inline;REMOVE THIS*/
    display: inline-block; /*ADD THIS*/
    vertical-align: middle;  /*ADD THIS*/
    position: relative;
}
#thumbsList li img {
    width: calc(100vw - 96px); /*ADD THIS*/
    transition: all 0.8s ease;
}
.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.backStrip {
    background-color: #2d2d2d;
    border-bottom: 1px solid #1a1a1a;
    height: 35px;
    position: relative;
    z-index: 22;
    position: fixed;
    width: 253px;
    top: 43px;
    height: 79px;
    left: 85px;
}
#infoText {
    color: white;
    font-style: italic;
    padding-top: 10px;
    float: right;
    margin-right: 10px;
    font-family: sans-serif;
    font-size: 12px;
}
#mainContainer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 8px solid #2D2D2D;
    margin: 0px;
    overflow-x: auto;
}
#thumbsButtons {
    list-style: none;
    position: fixed;
    bottom: 6%;
    left: 46%;
    z-index: 22;
}
#counterContainer {
    position: fixed;
    bottom: 5%;
    left: 50%;
    right: 50%;
    font-family: verdana;
    font-weight: bold;
    width: 100px;
}
#thumbsButtons li {
    float: left;
    margin-left: 11px;
    font-size: 16px;
    font-family: verdana;
}
#thumbsButtons li:hover {
    cursor: pointer;
}
#nextArrow {
    position: fixed;
    right: 10px;
    top: 43%;
    z-index: 13333;
    font-size: 100px;
    color: white;
    font-family: helvetica;
    cursor: pointer;
}
#sidelogo {
    position: absolute;
    z-index: 10;
    top: 35%;
    left: 0%;
    width: 67px;
    height: 258px;
    background-color: #2D2D2D;
}
.headerInfo {
    position: absolute;
    bottom: 22px;
    color: white;
    z-index: 333;
    font-family: verdana;
    font-size: 17px;
    text-align: center;
}
.thumbOverlay {
    position: absolute;
    z-index: 13111133;
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    /*display: inline; REMOVE THIS*/
}
#thumbsList:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

https://jsfiddle.net/vwxznmhy/

答案 4 :(得分：0)

添加此内容。 

#thumbsList li {
    display: inline-block;
    position: relative;
    height: 100%;
}

问题 -

自li成为display:inline以来，它ul的{​​{1}}高度不是#thumbsList。

<强>解决方案 -

完成li display:inline-block并添加height:100%后，li元素占据ul和thumbOverlay div的整个高度这是li的儿童元素也占据了100％的身高。

相关问题
最新问题