那些遇到过的问题

相关疑难解决方法(0)

遮盖对象以使其看起来好像它在旋转的项目后面

我正在尝试围绕另一个对象（圆）绕一个“点”轨道，但是由于z-index该点始终出现在圆的上方，因此它就意味着绕轨道旋转。

CodePen链接：https ://codepen.io/moy/pen/ROVZXd ? editors = 1100

理想情况下，动画的第二部分应在对象的后面进行，这样才能看到动画的另一半，直到另一边出来-可能吗？

我考虑过淡化正在移动的物体，但我不认为这样会产生平滑/遮盖的效果？

关于如何掩盖此区域，我有些困惑，因为我看不到CSS知道要隐藏的方式。我以为也许可以z-index通过动画更改50％的比例并将其重置为0％/ 100％，但这似乎无济于事。

有任何想法吗？提前致谢！

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 30px auto;
  position: relative;
  width: 100px;
  z-index: 20;
}

.orbit {
  border: 2px #eee transparent;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
  z-index: 10;
}
.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black; …
Run Code Online (Sandbox Code Playgroud)

html css css-animations

use*_*440
2019 04-11
9
推荐指数
1
解决办法
65
查看次数

z-Index不处理伪元素？

看到:

http://jsfiddle.net/Kq2PY/

div与z-index 5相对,并且:after之后是z-index 2的绝对值.

所以不应该:在div后面？

css z-index pseudo-element

Ale*_*lex
2012 09-18
8
推荐指数
2
解决办法
1万
查看次数

为什么clip-path（和其他属性）会影响DOM中稍后元素的堆叠顺序（z-index）？

之前已经有人问过这个问题，但只是z-index在 CSS 中明确定义了。

我试图在标题上使用剪辑路径，然后从该标题顶部下方的元素内拉出图像。但是，一旦我clip-path在标题上定义了 a ，图像（它应该位于堆叠顺序的较高位置，因为它稍后出现在代码中）就会位于标题下方：

body {
  padding: 1em;
}

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
  
}
Run Code Online (Sandbox Code Playgroud) 
<header>
  <h1>Header Content</h1>
</header>

<section>
  <img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>
Run Code Online (Sandbox Code Playgroud)

我希望图像位于标题上方。经过更多尝试后，我发现如果我position:relative在图像上设置 - 它会起作用：

body {
      padding: 1em;
    }

    header { …
Run Code Online (Sandbox Code Playgroud)

css clip-path

Evi*_*lDr
2020 09-08
8
推荐指数
1
解决办法
1827
查看次数

同级绝对元素上的 z-index

我试图理解为什么这个例子中的蓝色 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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="red1">
  <div class="blue">
    blue child 1
  </div>
</div>
<div class="red2">
  <div class="blue">
    blue …
Run Code Online (Sandbox Code Playgroud)

html css position z-index

Kir*_*oss
2016 07-27
6
推荐指数
1
解决办法
7002
查看次数

了解z-index堆叠顺序

我对使用z-index决定堆栈顺序感到有点困惑.

我不太明白浏览器如何将带有position属性的元素与没有它的元素一起处理.

是否有一般规则来决定元素的堆栈顺序是否已明确定位元素？

赞赏不同情况的例子.一般来说:

  1. <div>具有位置设定且没有位置设定的混合兄弟姐妹.
  2. 嵌套<div>s与兄弟s混合,<div>位置设置且没有位置设置.

css z-index css-position

Kua*_*uan
2016 07-13
5
推荐指数
1
解决办法
3857
查看次数

自定义表单字段的Z索引问题（选择）

背景

考虑以下定制输入（忽略JS）：

$(document).ready(() => {

  $('input').focus(function() {
    $(this).closest('.field-container').addClass('focused');
  });
  
  $('input').blur(function() {
    $(this).closest('.field-container').removeClass('focused');
  });
  
});
Run Code Online (Sandbox Code Playgroud) 
html, body {
  background: #eee;
}

.field-container {
  display: flex;
  padding: 12px 10px 0;
  position: relative;
  transition: z-index 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  width: 50%;
  z-index: 1;
}

.field-container.focused {
  transition-delay: 0s;
  z-index: 11;
}

.field-container.focused:before {
  opacity: 1;
  transform: scaleX(1);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: border, opacity, transform;
}

.field-container.focused label {
  font-size: 15px;
  opacity: 1;
  pointer-events: auto;
  top: 0;
}

.field-container.focused …
Run Code Online (Sandbox Code Playgroud)

html javascript css

Ben*_*rey
lucky-day
5
推荐指数
1
解决办法
69
查看次数

css z-index 嵌套元素的问题

我想在 z 平面上订购 3 个 HTML 元素：

.bank {
  width: 200px;
  height: 200px;
  background-color: grey;
  position: absolute;
  
  z-index: 100;
  
  transform: translateY(10%);
}

.card {
  width: 100px;
  height: 100px;
  background-color: red;
  
  position: absolute;
  left: 50px;
  top: 50px;
  
  z-index: 300;
}

.button {
  width: 50px;
  height: 50px;
  background-color: green;
  
  position: absolute;
  left: 30px;
  top: 50px;
  
  z-index: 200;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="bank">
       bank
       <div class="card">card</div>
    </div>
    
    <div class="button">button</div>
Run Code Online (Sandbox Code Playgroud)

我希望按钮位于银行顶部但卡后面。但无论我如何尝试，按钮始终位于银行和卡的顶部。

编辑：我注意到从“.bank”中删除 z-index 和转换可以解决这个问题，但我需要转换属性。我能做些什么？

什么可能导致它无法工作？谢谢

css z-index

Guy*_*Guy
2018 08-29
2
推荐指数
1
解决办法
2581
查看次数

如何控制粘性元素的子元素的 z-index

我有两个container元素，它们有position: sticky和 a z-index: 1。

其中一个元素有一个带有 的子节点position: absolute。

我希望子节点在视觉上位于两个container元素的顶部。

这是我必须保留的 html 结构以及我尝试过的内容：

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
  z-index: 10; /* this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="square"></div>
    </div>
    <div class="container"></div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这是它目前的样子：

在此处输入图片说明

这是我希望它的外观：

在此处输入图片说明

但我想保持元素的html结构和sticky对齐方式container。

css z-index alignment sticky

Sam*_*ton
lucky-day
2
推荐指数
1
解决办法
1196
查看次数

CSS过渡，带按钮，不覆盖文本

任何人都可以通过使用按钮帮助我解决问题::after吗？我::after对悬停按钮的内容位于文本上方有问题。

JSFiddle：https：//jsfiddle.net/pegues/yh4g2cme/

.button {
  position: relative;
  margin: 10px;
  padding: 16px 18px;
  color: #fff;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 1.00rem;
  line-height: 1.35rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  border: 0 none;
  background-color: #556f6e;
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
}
.button span {
  position: relative;
  z-index: 1;
  font-weight: inherit;
}
.button::after {
  position: absolute;
  top: 0;
  left: …
Run Code Online (Sandbox Code Playgroud)

html css

Peg*_*ues
2019 08-01
2
推荐指数
1
解决办法
53
查看次数

CSS bug 在固定位置的背景和文本之间带来了伪元素

好像我刚刚发现了一个错误或其他什么。通常，当一个元素有一个伪元素并且我希望它显示在其父元素后面时，我使用 z-index:-1。如果元素具有相对或绝对位置，但在位置固定时会发生一些奇怪的事情，则效果很好：伪元素位于元素的背景和文本之间，如下所示：

div {width:200px;height:100px;position:fixed;background:black;display:block;}
div::after {content:"";position:absolute;top:0;width:100%;height:100%;background:red;z-index:-1;display:block;}
Run Code Online (Sandbox Code Playgroud) 
<div>
 example
</div>
Run Code Online (Sandbox Code Playgroud)

是否可以修复此问题，以便伪元素完全位于父元素后面，就像其他位置一样？

谢谢。

css pseudo-element

gob*_*ler
lucky-day
1
推荐指数
1
解决办法
663
查看次数

隐藏其父母背后的div？ 

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

.content-wrapper相对定位并包含所有页面内容(不仅仅是弹出窗口).

.popup绝对定位.

.close也绝对定位.

当光标进入弹出窗口时,我有一些javascript移动关闭(所以我有一个很好的关闭栏出现在侧面).我发现这样做的最好方法就是使用jQuery动画.隐藏/显示甚至会造成口吃效果.stop()无法解决.我的问题是试图将.clop隐藏在.popup后面.无论我为两个div设置什么z-index .close都不会落后于.popup.

是否有可能在另一个绝对定位的div中有一个绝对定位的div位于其父级后面,如果是这样,怎么样？

css css-position absolutelayout css-transitions

Sty*_*hon
2012 04-05
0
推荐指数
1
解决办法
2万
查看次数

我应该使用z-index属性还是其他方法？

我的问题是我想在图像类上放置绿色滤镜。我使用了z-index属性，但工作原理并不相同。过滤器不显示upp。我应该使用z-index属性还是其他方法？

这是我的主要代码：

header {
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 0
  }
            
.black-filter { /*Not working for some reason*/
  height: 100%; 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: 8;
  background-color: #66fb04a8
} 
         
.image {
  width: 100%;
  position: absolute
  ; top: 0;
  left: 0;
  z-index: 5;
  height: 100%;
  width: 100%;
  background-image: url('https://images.pexels.com/photos/209137/pexels-photo-209137.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');     
  background-size: cover; 
  filter: blur(2px)
 }
           
nav {
  width: 100%; 
  position: absolute;
  top: 0; 
  left: 0; 
  z-index: 10; 
  background: 
  hsla(0, 0%, 100%, 0);
  overflow: hidden;
 }
Run Code Online (Sandbox Code Playgroud) 
<header …
Run Code Online (Sandbox Code Playgroud)

html css

Ham*_*wan
2019 03-23
-3
推荐指数
1
解决办法
162
查看次数

标签 统计

css ×12

html ×5

z-index ×5

css-position ×2

pseudo-element ×2

absolutelayout ×1

alignment ×1

clip-path ×1

css-animations ×1

css-transitions ×1

javascript ×1

position ×1

sticky ×1