Как наложить границу элемента, чьи «границы и скрытые переполнения» установлены с дочерним элементом - PullRequest
Новая
       12

Как наложить границу элемента, чьи «границы и скрытые переполнения» установлены с дочерним элементом

0 голосов
/ 01 февраля 2019

Я написал такой код, но граница дочернего элемента с указанием position: absolute не перекрывала границу родительского элемента. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lists {
  position: relative;
  overflow: hidden;
  height: 60px;
  border-top: 15px solid green;
}

.list {
  position: absolute;
  top: -15px;  /* .items border width */
}

.items+.items {
  border-left: 1px solid white;
}

.items {
  float: left;
  width: 20vw;
  height: 60px;
  border-top: 15px solid black;  /* overlap this border! */
  background: red;
}
<div class="lists">
  <ul class="list">
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
  </ul>
</div>

Согласно W3C , из-за переполнения скрыта мысль о том, что есть возможность скрыть границу.

Это значение указывает, что содержимое блока обрезается до его поля заполнения и что UA не должен предоставлять какой-либо пользовательский интерфейс с прокруткой для просмотра содержимого за пределами области обрезки или разрешать прокрутку при непосредственном вмешательстве пользователя, например при перетаскивании на сенсорном экране.или с помощью колесика прокрутки мыши.

На самом деле, когда я удалил переполнение, я получил идеальное поведение. 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.lists {
  position: relative;
  /* this property removed overflow: hidden; */
  height: 60px;
  border-top: 15px solid green;
}

.list {
  position: absolute;
  top: -15px;  /* .items border width */
}

.items+.items {
  border-left: 1px solid white;
}

.items {
  float: left;
  width: 20vw;
  height: 60px;
  border-top: 15px solid black;  /* overlap this border! */
  background: red;
}
<div class="lists">
  <ul class="list">
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
    <li class="items">text</li>
  </ul>
</div>

Однако я хочу установить переполнение: скрыто.Эта проблема вызвана свойством переполнения?Как можно решить эту проблему?Заранее спасибо ...

1 Ответ

0 голосов
/ 01 февраля 2019

Кажется, это работает: https://jsfiddle.net/04wzq396/2/

Проблема в том, что если вы используете свойства position и overflow для одного и того же элемента, вы можете вытолкнуть ребенка за пределы его границ только с помощью position: fixed;(относительно области просмотра).position: absolute; работает аналогичным образом, но размещает элемент относительно своего первого позиционированного предка.

Таким образом, решение здесь состоит в том, чтобы добавить контейнер для переполненного элемента и переместить туда свойство position.Если затем вы увеличите свойство top элемента .list с -15 до 0, зеленая рамка больше не будет видна.

...