Как разместить элемент поверх другого

Theia спросил: 14 ноября 2017 в 06:19 в: html

Я хочу поместить элемент поверх другого без изменения позиции второго. Я имею в виду:

.container {
	display: flex;
	align-content: baseline;
	padding: 50px;
	width: 50px;
	height: 50px;
	background-color: blue;
}

.base {
  color: black;
}

.top {
  color: red;
}

<div class="container">
  <div class="base">
    base
    <div class="top">
      should be on top
    </div>
  </div>
</div>

Я хочу, чтобы should be on top div располагаться над тегом base, а тег base должен быть выровнен так, как он это делает. Я пытался использовать относительное позиционирование и давать отрицательные значения дна, но это не так отзывчиво. Вот как я хочу, чтобы они были, за исключением того, что base должен сохранять прежнюю позицию:

    .container {
    	display: flex;
    	align-content: baseline;
    	padding: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: blue;
    }

    .base {
      color: black;
    }

    .top {
      color: red;
    }

<div class="container">
  <div class="top">
    should be on top
    <div class="base">
      base
    </div>
  </div>
</div>

should be ontop div должен находиться над base и base там, где это было раньше. Как я могу это сделать?
Вот что я пытался:

    .container {
    	display: flex;
    	align-content: baseline;
    	padding: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: blue;
    }

    .base {
      color: black;
    }

    .top {
      position: relative;
      color: red;
      bottom: 4.8em;
    }
    <div class="container">
      <div class="base">
        base
        <div class="top">
          should be on top
        </div>
      </div>
    </div>
Вот как Я хочу, чтобы они были размещены. Но если количество строк в should be ontop div изменится, то оно превысит число
base. Я думаю, что это можно сделать с помощью js, но я предпочитаю, чтобы это было только с css. Есть ли способ сделать это?

0 ответов