Укладка границ в CSS

Question

Я заполняю родительский div динамически сгенерированными дочерними div. Я бы хотел, чтобы дочерние div были связаны родителем (поэтому они не могут расширить форму родителя по горизонтали, поскольку они заполняются контентом). В то же время, я хотел бы, чтобы границы дочерних div сидели сверху границ родительского div, а также друг друга. Я бросил вместе схему, чтобы лучше объяснить:

Что является лучшим способом для достижения этой цели с помощью CSS? Я огляделся, и я не могу найти решение, которое укладывает границы, но также сохраняет дочерние div, ограниченные родительским div (по оси x).

Answer 1

Перекрывающиеся границы всегда немного сложны. В вашем случае я бы не рекомендовал работать с абсолютными позициями и z-индексами - это только усложнит ситуацию, и вы больше не сможете больше полагаться на собственное поведение элементов блока.

Допустим, что ваш HTML выглядит следующим образом:

<div class="parent"> 
    <div class="child yellow"></div> 
    <div class="child blue"></div> 
    <div class="child red"></div> 
</div> 

Вы можете достигнуть иллюзию перекрывающихся детей, только применяя верхнюю границу к :first-child. Даже если вы добавите больше дивы динамически в верхней части, первый всегда будет тот, который, как представляется, «сверху»:

.child { 
    border-style: solid; 
    border-width: 0 2px 2px 2px; 
    background: white; 
} 

.child:first-child { 
    border-top-width: 2px; 
} 

.yellow { 
    border-color: yellow; 
} 

.blue { 
    border-color: blue; 
} 

.red { 
    border-color: red; 
} 

Родитель нуждается в небольшой хак, потому что если вы добавили очередную границу вокруг он, будет отображаться вокруг детей.

.parent { 
    width: 500px; /* or any other width */ 
    height: 100vh; /* or any other fixed height */ 
    overflow-y: auto; /* make scrollable */ 
    box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black; 
} 

Вставка box-shadow создает иллюзию твердой границы на внутренней стороне родителя. Чтобы убедиться, что это не видно под границами детей (коробочные тени, как правило, немного размыты, чем границы), вы должны убедиться, что у детей цвет фона.

Редактировать: Here's a demo.

Answer 2

Вы можете влиять на порядок стека в css с z-index, но вам нужно использовать позицию: абсолютное или положение: фиксированное на этих элементах.

.div1 { 
    width: 200px; 
    height: 100px 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1  
} 
.div2 { 
    width: 200px; 
    height: 100px 
    position: absolute; 
    top: 190px; 
    left: 0; 
    z-index: 2  
} 

Это CSS должен отображать .div2 10px перекрывая .div1 Если высота динамична вы можете добавить его JS или добавить в DIV, как ребенок в следующем. Обратите внимание, что каждый атрибут «позиция» относится к недавней родительской позиции относительной или абсолютной!

Answer 3

Если я правильно Вас понял, вы могли бы поместить границу родителя с использованием :after и position absolute с z-index:-1:

.parent { position: relative; } 
.parent:after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    border: 1px solid black; 
} 

и для детей, вы можете удалить верхнюю границу, если не: первым :

.child:not(:first-child) { 
    border-top: 0; 
} 

Answer 4

вы также можете попробовать этот. Определите два разных класса. Класс «Граница» для ширины и стиля границы. И класс цвета.Например:

<style> 
    .border { 
       border: 5px solid; 
      } 

    .green { 
      border-color: green; 
      border-top-width: 0px; 
      } 

    .yellow { 
      border-color: yellow; 
      } 
    /*I do not use a border-top-width to remowe top because this is the first div.*/ 

    .red { 
      border-color: red; 
      border-top-width: 0px; 
     } 
</style> 
    <div class="container"> 
     <div class="border yellow">yellow</div> 
     <div class="border green">green</div> 
     <div class="border red">black</div> 

    </div>