Element does not look complete even with overflow-x: visible

Question

Element does not look complete even with overflow-x: visible

Navigation

#1 by (3 votes)

4

I have a page with two columns, one of them has a drop-down list that is displayed when I mouse over an element. The dropdown extends beyond the content and that's where the problem lies: even though the container column has a overflow-x: visible and a z-index higher than the other column, the dropdown is not complete. Why does that happen? How could I solve it?

This is a minimum code to reproduce the problem:

Note: this is a reduced code of what I really have, I can not change the positioning of the dropdown that is designed like this. The problem is that the container has a overflow-x: visible that is not being applied, not the positioning of the element.

html, body, .col {
  background: #ffe;
  font-family: arial;
  font-size: 15px;
}

.col {
  float: left;
  position: relative;
  width: 200px;
  height: 500px;
  overflow-x: visible;
  overflow-y: auto;
  z-index: 1;
}

#col2 {
  z-index: 2;
}

#col2 span {
  display: inline-block;
  height: 1rem;
  line-height: 1rem;
}

#col2 #dropdown ul {
  width: 150px;
  padding-left: 0;
  background: white;
  list-style: none;
  position: absolute;
  top: 0;
  left: -30px;
  border: 1px solid gray;
  display: none;
}

#col2 #dropdown:hover ul {
  display: block;
}

<div class="col" id="col1">
  Este es el contenido de la columna 1. 
  Este texto realmente no es importante, 
  es solo para ocupar espacio.
</div>
<div class="col" id="col2">
  <span id="dropdown">
    Abrir dropdown &#8964;
    <ul>
      <li>Opción 1</li>
      <li>Opción 2</li>
      <li>Opción 3</li>
    </ul>
  </span>
</div>

html5 html css3 css

asked by Alvaro Montoro 01.08.2018 в 15:36

source

1 answer

Error serialize Json abstract class Help with a query in linq

score 3 · Accepted Answer

It's not a problem of the z-index, it's the overflow, I added overflow to col2 and it can be seen.

If you use visible for any of the overflow and any something else for the other, the visible value that you put is interpreted as < strong> auto . It's not very nice, but that's what I understand happens. I found a link that may be useful, however I do not handle the subject in detail as to expand more. link

html, body, .col {
  background: #ffe;
  font-family: arial;
  font-size: 15px;
}

.col {
  float: left;
  position: relative;
  width: 200px;
  height: 500px;
  overflow-x: visible;
  overflow-y: auto;
  z-index: 1;
}

#col2 {
  z-index: 2;
  overflow-x: visible;
  overflow-y: visible;
}

#col2 span {
  display: inline-block;
  height: 1rem;
  line-height: 1rem;
}

#col2 #dropdown ul {
  width: 150px;
  padding-left: 0;
  background: white;
  list-style: none;
  position: absolute;
  top: 0;
  left: -30px;
  border: 1px solid gray;
  display: none;
}

#col2 #dropdown:hover ul {
  display: block;
}

<div class="col" id="col1">
  Este es el contenido de la columna 1. 
  Este texto realmente no es importante, 
  es solo para ocupar espacio.
</div>
<div class="col" id="col2">
  <span id="dropdown">
    Abrir dropdown &#8964;
    <ul>
      <li>Opción 1</li>
      <li>Opción 2</li>
      <li>Opción 3</li>
    </ul>
  </span>
</div>

I hope you serve, greetings.