Question 71944 in CSS Question posted in
Some basic documentation can be found here.

Css: position and z-index ignored and warning shown

I am building a card, click to flip it. but the user will be unable to select the content, I do not want to mess with document.onselectionchange, therefore I added a copy button to every card at the top right corner.

however, in this css layout, I can never click the button. I inspected the elements, find that some properties on .copiable .widget has issue compiling, specifically:

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

there is always an exclainmation mark besides it and I cannot see any helpful warning.

/* card */
.card-wrapper{
    /*
    front: .card-wrapper.card-sides
    back: .card-sides.card-back
    */
    background-color: var(--card-front);
    box-shadow: 5px 5px 15px var(--card-shadow);
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 20px;
    transition: box-shadow 200ms ease-in, transform 400ms ease-in;
    background: lightgrey;
}

.card-sides{
    width: 500px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* cannot set overflow to auto or hidden
    it will hide before or after pseudo-elements */
    color: var(--card-color);
}

.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);
}

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

.copiable .widget{
    z-index: 200000;
    text-indent: 0;
    /* end of unsetters */
    position: absolute;
    /* right: 18px; */
    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" style="transform: scale(1, 1);">
    <div class="widget copy" style="right: 10px; display: block;">copy</div>
    <div class="cyber-block-wrapper"
        style="position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 20000;">
    </div>
    <div class="card-text md-auto-format" style="opacity: 1;">
        <p>
        <p><strong>bold</strong>&nbsp;
            <ins>underline</ins>&nbsp;
            <del>deleted</del> &nbsp;
        </p >
        </p >
    </div>
</div>

I will be more than glad if you can give me a hand.

Tags:

3

Answers


  1. 0

    Your cyber-block-wrapper div covers the entire card and it’s in front of your copy button, so it’s blocking the clicks (and the hover). If you don’t want that to happen you could set pointer-events: none on cyber-block-wrapper.

    Login or Signup to reply.
  2. 0

    there is always an exclainmation mark besides it and I cannot see any helpful warning.

    You are getting a warning in .copiable .widget because all properties you named (position, z-index, padding, transition) are duplicated.

    To solve the "exclamation mark" problem, you can simply remove the duplicates and just keep the value you want to have.
    (E.g.: remove padding: 5px; and keep padding: 0;, or the other way around)

    Disable text selection:
    For this, you can use the CSS property user-select: none;

    Or if you want to stick with your example:

    Edit .copiable .widget remove the duplicated z-index: 10; so that your copy button has a higher z-index than your container .copiable.

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

.copiable{ 
     z-index: 2000;
}
    Login or Signup to reply.
  3. 0

    The real issue was the element stack with z-index however given what you appear to be attempting it feels like a grid may actually work better and moved a lot of style to CSS where it probably belongs better.

    I commented out a lot of the CSS and put some updates in there however note the z-index part is the critical portion here.

    FWIW most often with CSS too much is the issue and removal and simplification and focus on the goal state is a good strategy rather than trying to add MORE.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search