css - относительный DIV не имеет высоты

Я не понимаю, что не так с моим кодом. Я имею в виду, div { position : relative ; маржа : 0 30% ; } раздел div { position : absolute ; top : 0 ; право : 0 ; left : 0 ; высота : 100 пикселей ; background-color : желтый ; } hr { height : 2px ; background-color : синий ; } имеет высоту, отображаемое значение элемента <div> <section> </ section> </ div> <hr> является определенным блоком, и я действительно не знаю, как это работает и как объединить эти два элемента по-разному. Пожалуйста, дайте мне ваши решения и советы, чтобы узнать что-то новое сегодня. 

height: auto
position: absolute

html,css,css-position,

0

Ответов: 3

0 принят

Вы хотите, чтобы ваш час был на дне первого дивизиона, не так ли?

Однако это не работает, потому что родительский div имеет height: 100pxсвойство по умолчанию .
Это означает, что родительский div будет иметь высоту своих детей.
Когда вы устанавливаете position: relativeна ребенка, вы нарушаете эту систему.
Родитель больше не будет заботиться о своем ребенке.

Итак, если вы хотите сделать это работает, у вас есть два решения :
- установить пользовательскую высоту ( ) на родительский DIV (не хорошо) - удалить абсолютное положение на участке ребенка ( по умолчанию: )div { position: relative; margin: 0 30%; } div section { height: 100px; background-color: yellow; } hr { height: 2px; background-color: blue; }
<div> <section></section> </div> <hr>

div {
  position: relative;
  margin: 0 30%;
  height: 200px;
  background-color: red;
}
div

0

У вашего элемента высота установлена ??на АВТО. Если вы хотите изменить высоту div, вам нужно написать это в css.

section
0

Я думаю, что это потому, что у вас divнет самой высоты, поэтому она не видна и увеличивается по своему дочернему элементу, который находится section и находится в absouluteположении. Я не уверен, что вы делаете, но если вы хотите показать раздел внутри div вместе с высотой div, вы должны включить css для своего div.

Я дал предположение для вас, надеюсь, это поможет вам

div {
  position: relative;
  margin: 0 30%;
  background-color: green;
  height: 150px;
}
section {
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  height: 50px;
  background-color: yellow;
}
div hr {
  height: 10px;
  background-color: red;
}
<html>
<head>
</head>
<body>
  <div>
    <p>your div</p>
    <hr>
    <section>your section</section>
  </div>
</body>

</html>

HTML, CSS, CSS-положение,
Похожие вопросы
Яндекс.Метрика