标签: z-index

好的，伙计们，这是一个棘手的问题（也许）：有没有可以获得元素的某种“全局 z-index”？这是我想做的一个例子：

给定两个元素引用，您将如何确定哪个元素在 z 顺序中更高（假设它们可能没有分配 z 索引或位于单独的容器中）

欢迎详细的黑客！不那么复杂的方法更受欢迎。

我有一种情况,我在页面上有两个或多个固定位置元素,显示堆叠的一个在另一个上面(也就是说,第二个的顶部邻接第一个的底部 - 没有z-索引堆叠这些元素).在第一个固定位置元素内部,有一个绝对定位的元素,它高于其固定的父元素,因此它延伸到固定父元素的底部之外.

问题是下一个固定位置元素显示在绝对定位元素的顶部.我在绝对定位的元素上设置了比固定定位元素更高的z-index值,但它被完全忽略.

为了帮助澄清这个问题,我把这个例子放在一起:

HTML

<div class="fixed first">
    <p>This is a fixed element</p>
    <p class="abs">
        I should be displayed above both fixed position elements
    </p>
</div>
<div class="fixed second">
    <p>This is a fixed element</p>
</div>

CSS

.fixed {
    font-size: 16px;
    background: #eee;
    border-bottom: 1px solid #ccc;
    position: fixed;
    height: 3em;
    width: 100%;
    z-index: 1;
}

.abs {
    position: absolute;
    background: #acc;
    height: 6em;
    top: 0;
    left: 25%;
    width: 50%;
    z-index: 2;
}

.second {
    top: 3.0625em;
}

这是JSFiddle的工作示例:

http://jsfiddle.net/GS4E4/8/ …

:after是否有可能在其父元素的背景后面 获取 CSS 伪元素？

的背景:after包含与父元素的背景相同的尺寸。所以目前看起来是这样的：

但我希望红色背景 ( :after) 位于父元素后面。所以我添加了position: relative父元素和absolute伪元素。

试图存档这个我使用了这段代码：

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}

<a href="" class="btn">
  This is my button
</a>

奇怪的是上面的代码片段就像魅力一样。但在我的实时示例中，显示的代码与本主题中的图像完全相同。有人知道实时站点出了什么问题吗？

我使用纯css3制作了下拉菜单,但是一个属性(z-index)没有按照我的预期工作,这是一个非常大的问题,因为下拉列表正在下降菜单.理想情况下,它必须在菜单下删除.我整天试图对这个问题做点什么,但遗憾的是无法弄明白,所以现在请求帮助......我为问题项目做了不同的背景颜色,以便很好地看到我正在努力达到.主要目的是红色背景的子菜单必须在蓝色背景下.
PS我已经尝试用jQuery slideDown/slideUp属性制作这个菜单,但它们看起来不像理想的幻灯片效果(如我的例子).它们看起来更像拉伸,而这不是我想要的......

JSFIDDLE上的示例

ul {
  list-style-type: none;
}
.menu_wrapper {
  position: relative;
  z-index: 999;
  /* IS NOT WORKING... O_o...*/
  height: 70px;
  width: 600px;
  background-color: blue;
}
.menu li {
  display: inline;
  float: left;
  display: table;
  height: inherit;
  margin: 3px;
  margin-top: 10px;
}
.menu li a {
  display: table-cell;
  font-family: Verdana;
  font-size: 16px;
  color: gold;
  text-align: center;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  background: #05487F;
  transition: .2s ease-in-out;
}
.sub-menu {
  position: absolute;
  z-index: 1;
  /* IS NOT …

我试图理解为什么这个例子中的蓝色 div 并不总是在上面？即为什么红色 div #2 位于蓝色孩子 1 的顶部。

body {
  padding: 30px;
}
.red1 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  background: red;
}
.red2 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  top: 250px;
  background: red;
}
.blue {
  z-index: 9;
  padding: 10px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 150px;
  height: 130px;
  background: blue;
}

<div class="red1">
  <div class="blue">
    blue child 1
  </div>
</div>
<div class="red2">
  <div class="blue">
    blue …

我在将一个容器放置在另一个使用剪切路径的容器顶部时遇到问题。我尝试在任一容器上使用 z-index 但似乎没有帮助。

如果我从容器中删除剪切路径类，则块会在容器上愉快地滑动。我已经包含了我的问题的一个小提琴。

这是我的代码：

window.onscroll = function(){
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var para = Math.round(scrollTop / 1.2);
  document.querySelector('#block').style.transform = "translate3d(0px," + para + "px,0px)";
}

body {margin: 5px;}

#main {height:100vh;}
#below-main {height:100vh;}
#row1 {height:100vh;}


/* Paralellogram to slide underneath block
--------------------------------------------- */
#bluestripe {  
  height: 60vh;
  width:60vw;
  margin: 0 auto;
}

img {width: 100%;}

.clip-polygon {clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);}


/* Block to sit above parallelogram
--------------------------------------------- */
#block {
  height: 50px; …

我只有 1 张需要zIndex在前面显示的图像。它适用于 Android，但它不会出现在 IOS 设备中。不知道为什么。

这是Android的图片：

这是IOS的图片：

如您所见，用户图像没有出现在 IOS 中。

代码是这样的：

 <View>
      <Image
        source={require("./images/user-img.png")}
        style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:1}}
      />
      <ImageBackground
        source={require("./images/bg-img.png")}
        style={{ width: "100%", height: "100%"}}>
        <View>
         //extra code here
        </View>
      </ImageBackground>
 </View>

有谁知道原因吗？

所以我有这个标记，里面有<div class="mask"></div>将蓝色叠加层设置在图像顶部的标记。

如果我不做.container position:relative，标题文本就会隐藏在蓝色层后面......几乎就像它的用法是在模仿z-index

为什么会这样？

笔：https : //codepen.io/anon/pen/OBbbZB

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}

<section>
  <div class="mask"></div>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</section>

当菜单在彼此之上展开时，我有一些代码最初会出现故障。

如果您在第一个菜单中选择选项二，则会出现第二个选项。如果您随后打开第一个菜单，您会看到它在打开时出现故障 - 几乎有类似快门的延迟。也许它与 z 索引设置有关，我不确定？

在 Firefox 和 chrome 中，没有（明显的）故障。在 safari 中，下面的代码段有一个小故障。

为什么会出现故障？

const selected = document.querySelectorAll(".selected");
const optionsContainer = document.querySelectorAll(".options-container");

for (let i = 0; i < selected.length; i++) {
  selected[i].addEventListener("click", () => {
    optionsContainer[i].classList.toggle("open");
    selected[i].classList.toggle("open");

    for (let j = 0; j < selected.length; j++) {

      if (i != j && selected[j].classList.contains("open")) {
        optionsContainer[j].classList.toggle("open");
        selected[j].classList.toggle("open");
      }
    }
  });
}

for (let i = 0; i < optionsContainer.length; i++) {
  let optionsList = optionsContainer[i].querySelectorAll(".options");

  for (let j …

我在扩展中有多个表单，我正在使用此代码作为日期选择器，

<mat-form-field>
  <input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>

哪个工作得很好，扩展并没有隐藏它（看看），但是我有日期和时间的开始和结束值，所以我切换到ngx material daterangepicker。

我唯一的问题是扩展隐藏了 daterangepicker (have a look)，所以 daterangepickers 代码如下所示：

      <mat-form-field>
        <input
          matInput
          ngxDaterangepickerMd
          name="daterange"
          placeholder="Choose date"
          applyLabel="Okay"
          startKey="start"
          endKey="end"
          firstMonthDayClass="first-day"
          lastMonthDayClass="last-day"
          emptyWeekRowClass="empty-week"
          lastDayOfPreviousMonthClass="last-previous-day"
          firstDayOfNextMonthClass="first-next-day"
          [autoApply]="options.autoApply"
          [linkedCalendars]="options.linkedCalendars"
          [singleDatePicker]="options.singleDatePicker"
          [showDropdowns]="true"
          formControlName="date"

          [showWeekNumbers]="options.showWeekNumbers"
          [showCancel]="options.showCancel"
          [showClearButton]="options.showClearButton"
          [showISOWeekNumbers]="options.showISOWeekNumbers"
          [customRangeDirection]="options.customRangeDirection"
          [lockStartDate]="options.lockStartDate"
          [closeOnAutoApply]="options.closeOnAutoApply"
          [opens]="opens"
          [drops]="drops"
          [timePicker]="timePicker"
        />
      </mat-form-field>

我试图给它一个自定义的 z-index，比如：

.md-drppicker {
  z-index: 9999;
}

ngx-daterangepicker-material {
  z-index: 9999;
}

但这并没有解决问题，也尝试弄乱显示/位置，但我无法修复它。
知道出了什么问题吗？

编辑：这是日期范围选择器问题的更好图片