水平图像的响应图像叠加 [英] Overlay on Responsive Image for horizontal Image

问题描述

我想在水平库中为响应图片创建重叠式广告。
li 中的重叠 div 具有位置和一个大的 z-index 值，但仍显示在图像的背景上。
当我尝试为 z-index 的图像执行 absolute 时图像水平滚动失败

I am trying to create an overlay for responsive images in a horizontal gallery. The overlay div in the li has position and a large z-index value but still displays on background of the image. When I try to do absolute for an image with higher z-index the horizontal scrolling for image fails.

查看演示： 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>

检查第二张图像。我已经添加了覆盖。

Check the Second Image. I have added the overlay to that.

推荐答案

Marc Andre，不幸的是，你的小提琴代码是相当漏洞和不一致。所以，我不是修补和重新排列它，而是从头开始保持尽可能接近你的原创想法的自由。

Marc Andre, your fiddle(s) code is, unfortunately, rather leaky and inconsistent. So, instead of patching and rearranging it, I took the liberty of starting from scratch staying as close to your original idea as possible.

为了快速查看，检查我的笔on CODEPEN Responsive filmstrip and thumblist

For a quick look, check my Pen on CODEPEN Responsive filmstrip and thumblist

你哪里错了？
首先，我不打算接你，我只是诚实：

Where did you go wrong? First of all, I don't intend to pick on you, I am just being honest:

你没有使用' position '正确地在你的元素，这（可能）导致混乱（拉发，我猜）屏幕输出。

You didn't use 'position' correctly on your elements, which (probably) resulted in a confusing (hair-pulling, I guess) onscreen output.

两个一般规则：

1） parent-element => position：relative，child-element => position：absolute 。
两者都可以有任何种类的宽度/高度（％，px），但子值相对于父元素。

1) parent-element => position: relative, child-element => position: absolute. Both can have any kind of width/height (%, px), but the child values are relative to the parent-element.

2） child-element => position：fixed 。宽度/高度/位置是相对于浏览器窗口的，ALWAYS。

2) child-element => position: fixed. Width/height/position are relative to the browser window, ALWAYS.

您混合了这两个规则，让自己在圈子中运行。要释放你应该做的事情：

You mixed the two rules and got yourself running in circles. To break free you should do:

/* Generally accepted (and working) init of HTML and BODY */
html, body         { width: 100%; height: 100%; margin: 0; padding: 0 }
body               { max-width: 100%; margin: 0 auto }
/* margin: 0 auto will center BODY onscreen if max-width < 100% */


#thumbsList        { position: absolute /* relative to BODY!!! which is a parent */ }

#thumbsList li     { position: relative /* while a child of UL, it is a parent of IMG */ }

#thumbsList li img { position: absolute /* child of LI absolute coords relative to LI */ }

#thumbslist （仅适用于尺寸，样式等）需要位置。
再次不幸的是，由于（逻辑）错误的数量，你的CSS需要重新设计（IMHO是）。

No further 'position'ing should be needed for #thumbslist (only sizing, styling and such). Again unfortunately, because of the number of (logic) errors, your CSS requires to be redesigned (IMHO that is).

UPDATE

UPDATE

正如你可能已经看到的，代码工程在Codepen和独立在最新的IE11，FF和CH（所有W7，我仍然需要检查移动）。

As you may have seen by now, the code works on Codepen and standalone in the latest IE11, FF and CH (all W7, I still need to check mobile).

我基本上创建的是一堆堆叠的flexbox布局图层。一旦你掌握了flexbox技术，你会发现它比常规（内联）块技术有很多优势。

What I essentially created is a strip of stacked flexbox layout layers. Once you master the flexbox techniques, you wil see that it has lots of advantages over regular (inline-)block techniques. Drawbacks too, I will point them out where applicable.

为了方便理解我的flexbox工作流程，我总是询问需要什么样的基本布局：

To easily understand my (very down to earth) flexbox workflow I always ask what basic layout is needed:

• 一行列或一列列


• 包装与否


• 理由（通常 justify-content：space-between 之间，您可能想要读入此信息）

• a column of rows or a row of columns
• wrapping or not
• justification (often justify-content: space-between, you may want to read into this)

嵌套和欺骗会更晚...

Nesting and trickery will come later...

解析你的要求：你实际上需要一个普通的网页，您需要堆叠，因此需要图层

Dissecting your requirements: you actually need a regular webpage, but instead of nicely placed blocks, you need them stacked, hence the need for layers

这篇关于水平图像的响应图像叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！