Предотвращение перекрытия относительных разделов

ProgramBox

Предотвращение перекрытия относительных разделов

Post author:admin
Запись опубликована:24 февраля, 2023
Post category:Вопросы по программированию

#html #css #css-position

#HTML #css #css-позиция

Вопрос:

В основном, строка div стрелок в настоящее время перекрывается с заголовком div. Я бы хотел, чтобы панель div находилась под заголовком div.

Я понимаю, что, поскольку разделы name и rectangle абсолютно расположены, они не занимают места, как обычно, но я не знаю, как сделать так, чтобы панель div отображалась под заголовком div. Простым решением было бы придать строке достаточное верхнее поле или отступ, пока она не будет расположена под заголовком div, но это кажется плохим способом сделать это. Есть ли лучший способ добиться этого?

Вот jsfiddle

HTML

 <div>NAME</div>

<div class="title">
    <div class="name">JOHNATHAN DOE</div>
    <div class="rectangle"></div>
</div>

<div class="bar">
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
</div>

CSS

 .title {
    position: relative;
    top: 0px;
    left: 0px;
}
.rectangle {
    height: 75px;
    width: 75px;
    position: absolute;
    right: 0px;
    background: red;
}
.name {
    font-size: 3em;
    position: absolute;
    left: 0px;
}

.arrow {
    width: 28%;
    height: 24px;
    background: #777777;
}

.arrowPointer {
    border-left: 12px solid #777777;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid transparent;
    font-size: 0; 
    line-height: 0; 
    width: 0;
}

.arrowEnd{
    border-left: 12px solid transparent;
    border-top: 12px solid #777777;
    border-bottom: 12px solid #777777;
    border-right: 12px solid #777777;
    font-size: 0; 
    line-height: 0; 
    width: 0;
}

.bar > a > div {
    float: left;
}

Ответ №1:

Абсолютное позиционирование по определению размещается на основе указанных координат в CSS. Если вы хотите разместить строку под заголовком, сделайте ее «относительной». Если есть причина, по которой вы не хотите делать его относительным, может быть способ обойти это.

Кроме того, создание таблицы стилей на основе взаимного расположения также очень полезно, когда вы хотите изменить размер окна, просмотреть веб-сайт на другом устройстве или просмотреть веб-сайт на экране с другим разрешением и / или разрешением DPI.

РЕДАКТИРОВАТЬ ответ: JSFiddle Используйте Clear:both , чтобы переместить ваш div ниже другого, сохраняя при этом их относительное позиционирование.

1. Когда панель расположена относительно, это не устраняет проблему. Панель по-прежнему отображается перекрывающейся над заголовком div. jsfiddle.net/dannyp32/9kYVL/1

2. Думаю, теперь я лучше понимаю вашу проблему. Причина, по которой это происходит, заключается в том, что абсолютное позиционирование выполняется относительно первого родительского элемента, который имеет позицию, отличную от статической. Попробуйте установить для вашего name div значение relative и посмотреть, поможет ли это.

3. Итак, да, я понимаю, что установка имени в static позволит расположить панель под ним. Но у меня есть имя, расположенное абсолютно, потому что я хотел бы, чтобы названия и прямоугольники были расположены на противоположных сторонах в одном и том же вертикальном положении. Когда я устанавливаю имя как статическое, оно также сдвигает прямоугольник вниз, чтобы быть под именем.

4. Итак, чтобы уточнить, вы хотите, чтобы слово «Имя» и прямоугольник были в одной строке, «Джон Доу» во второй строке и полосы со стрелками в третьей строке, правильно?

5. Да, это именно то, что я пытался сделать. Спасибо!