Css:忽略位置和z索引并显示警告

slhcrj9b  于 2023-03-05  发布在  其他
关注(0)|答案(3)|浏览(147)

我正在建立一个卡片,点击翻转它。但是用户将无法选择内容,我不想搞乱document.onselectionchange,因此我添加了一个复制按钮,每张卡片在右上角。
然而,在这个css布局中,我永远不能点击按钮。我检查了元素,发现.copiable .widget上的一些属性在编译时有问题,具体来说:

position: absolute;
z-index: 200000;
padding: 0;
transition: all 0.3s ease;

旁边总是有一个exclaination标记,我看不到任何有用的警告。
x一个一个一个一个x一个一个二个x
如果你能帮我一把,我将非常高兴。

u3r8eeie

u3r8eeie1#

你的cyber-block-wrapper div覆盖了整张卡片,并且在复制按钮的前面,所以它会阻挡点击(和悬停)。如果你不想发生这种情况,你可以在cyber-block-wrapper上设置pointer-events: none

klr1opcd

klr1opcd2#

真实的的问题是带有z索引的元素堆栈,然而,考虑到你似乎正在尝试的东西,感觉网格实际上可能工作得更好,并将许多样式移到CSS中,而CSS可能更适合它。
我注解掉了很多CSS,并在那里放了一些更新,但是注意z-index部分是这里的关键部分。
FWIW最经常与CSS太多是问题和删除和简化,并侧重于目标状态是一个很好的策略,而不是试图添加更多。

document.querySelector(".widget.copy").addEventListener("click", (event) => {
  console.log(event.currentTarget);
  event.currentTarget.dataset.gotclicked = "cheers";
});
:root {
  /* patch up the missing variables to prevent errors since no fallback in place */
  --card-front: #00000022;
  --card-shadow: 5px 5px 15px #FF000044;
  --card-color: #0000FFDD;
  --font-size: 16px;
}

.card-wrapper {
  /* this is really the wrapper/parent of all this */
  font-size: var(--font-zize);
  background-color: var(--card-front);
  box-shadow: var(--card-shadow);
  margin: auto;
  margin-top: 1.875em;
  margin-bottom: 1.875em;
  border-radius: 1.25em;
  transition: box-shadow 200ms ease-in, transform 400ms ease-in;
}

.card-sides {
  /* this is really the wrapper/parent of all this */
  transform: scale(1, 1);
  width: 31.25em;
  height: 18.75em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  color: var(--card-color);
}

.widget.copy {
  grid-row: 1;
  grid-column: 12;
  background-color: #ffffff;
  margin-top: 1rem;
  margin-right: 1rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.widget.copy[data-gotclicked="cheers"] {
  background-color: #FBFB04;
}

.cyber-block-wrapper {
  /* I don't know what this is for but push it back behind so we can click */
  grid-row: 1 / span 8;
  grid-column: 1 / span 12;
  z-index: -1;
  overflow: hidden;
  border: solid 1px lime;
}

.card-text.md-auto-format {
  opacity: 1;
  grid-row: 2 / span 7;
  grid-column: 1 / span 12;
  display: grid;
  /* super center the content */
  place-items: center;
  font-size: 2em;
  font-family: Georgia, serif;
}

/* does not exist
.card-wrapper .card-back {
  background-color: var(--card-back);
  color: var(--card-color);
}

.card-wrapper .card-text {
  padding: 15px;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  font-size: 40px;
  font-family: Georgia;
  white-space: wrap;
  overflow: auto;
}

.card-wrapper .card-text,
.card-wrapper .card-text>p,
.card-wrapper .card-text>p>p {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-sides.card-on-front {
  background-color: var(--card-back);
  color: var(--card-color);
}
*/

/*
.copiable {
  position: relative;
  z-index: 2000;
}
*/

/*
.copiable .widget {
  z-index: 200000;
  text-indent: 0;
  position: absolute;
  top: 10px;
  content: "double click to selection";
  padding: 0;
  width: auto;
  height: auto;
  position: absolute;
  font-size: 12px;
  color: #333;
  line-height: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10;
  background: #fff;
  transition: all 400ms ease-in;
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
  display: none;
}

.widget:hover {
  opacity: 0.75;
}*/
<div class="card-wrapper card-sides copiable">
  <div class="widget copy">copy</div>
  <div class="cyber-block-wrapper">
  </div>
  <div class="card-text md-auto-format">
    <p>
      <p>
        <strong>bold</strong>&nbsp;
        <ins>underline</ins>&nbsp;
        <del>deleted</del>&nbsp;
      </p>
    </p>
  </div>
</div>
kcrjzv8t

kcrjzv8t3#

旁边总是有一个exclaination标记,我看不到任何有用的警告。
您在.copiable .widget中收到警告,因为您命名的所有属性(positionz-indexpaddingtransition)都重复。
要解决“感叹号”问题,您可以简单地删除重复的值,只保留您想要的值。(例如:删除padding: 5px;并保留padding: 0;,或相反)

**禁用文本选择:**为此,您可以使用CSS属性user-select: none;

或者如果你想坚持你的例子:
编辑.copiable .widget删除复制的z-index: 10;,使复制按钮的z轴比容器.copiable的z轴高。

.copiable .widget {
    /* otherattributes */
    z-index: 20000
}

.copiable{ 
     z-index: 2000;
}

相关问题