Почему здесь в position: absolute не работает bottom: 68px?

121
25 октября 2019, 08:30

html

    <header>
    <section class="intro">
        <input type="radio" name="name" id="link1" checked>
        <input type="radio" name="name" id="link2">
        <input type="radio" name="name" id="link3">
        <input type="radio" name="name" id="link4">
        <input type="radio" name="name" id="link5">
        <section class="content">
            <section class="inner">
                <li class="home-page background">
                    <section class="home section-background">
                        <article>
                            <span class="logo"></span>
                            <span class="about">
                                <h1>megapolis studio</h1>
                                <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
                                <a class="read-more">Узнать больше</a>
                                <a class="callback">Позвоните мне</a>
                            </span>
                        </article>
                    </section>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </section>
        </section>
        <section class="radio-buttons">
            <label for="link1"></label>
            <label for="link2"></label>
            <label for="link3"></label>
            <label for="link4"></label>
            <label for="link5"></label>
        </section>
    </section>
</header>

css

.intro {
    position: relative;
}
.inner {
    width: 500%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}
.inner li {
    width: 20%; height: 100%;
    float: left; display: block;
    padding: 68px 0;
}
    /* Content section */

    /* Home page */
    .background {
        background-size: cover;
        background-position: center;
    }
    .section-background {
        float: right;
        width: 70%; height: 100%;
        background-color: rgba(17, 17, 17, .925);
    }
    .home-page {
        background-image: url(img-1.jpg);
    }
    /* Controls */
    /* Labels buttons */
    .radio-buttons {
        width: 20%;
        position: absolute;
        top: 68px; bottom: 68px; left: 0;
        background-color: rgba(17, 17, 17, .925);
    }

Проблема в контейнере с label. Отступ сверху есть, снизу не делает. У всех контейнеров оберток задана фиксированная высота и ширина 100%

Answer 1

Все у вас прекрасно работает. Просто у section.intro высота МЕНЬШЕ, чем нужно для размещения блока .radio-buttons (она определяется содержимым, спозиционированным не абсолютно, т.е., в данном случае кучкой радиокнопок). Поставьте section.intro высоту, например, 200px и понаблюдайте за поведением .radio-buttons.

READ ALSO
Вёрстка hexagon [закрыт]

Вёрстка hexagon [закрыт]

Прошу помощи у более опытных ребятУчусь только 3 месяца, взял себе второй макет для учебы и там вот такая секция:

118
Разметка нестандартной таблицы html [закрыт]

Разметка нестандартной таблицы html [закрыт]

помогите, пожалуйста сверстать подобную таблицу средствами html и сssБуду крайне благодарен

103
Вывод данных в angular

Вывод данных в angular

При выводе данных в html

139