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

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть <section> тег, используемый в качестве контейнера для нескольких других элементов. В качестве родственного <section> тега у меня есть <h1> своего рода таймер. Дело в том, <section> что тег позиционируется именно так, как я хочу, без <h1> , и когда <h1> он существует, он перемещает <section> тег. Как я могу использовать <h1> тег, не перемещая <section> тег? Спасибо! (Требуется CSS ниже)

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    margin: 0 auto;
}

/* The <h1> mentioned above*/
.timer {
    margin: 10px;
    font-family: roboto;
    color: #F6E71D;
    font-weight: 100;
    font-size: 25px;
}

/*The container mentioned above*/
#card-container {
    width: 640px;
    height: 640px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    perspective: 1000px;
}

 <h1 class="timer">Time left: </h1>
    <section id="card-container">
        <div class="card">
            <div class="card-back">
                <img class="logo" src="assets/logo.svg" alt="logo.svg">
            </div>
            <div class="card-front">
                <h1 class="symbol">X</h1>

            </div>
        </div>
        <div class="card">
            <div class="card-back">
                <img class="logo" src="assets/logo.svg" alt="logo.svg">
            </div>
            <div class="card-front">
                <h1 class="symbol">X</h1>

            </div>
        </div>

1. Не могли бы вы также опубликовать свой HTML-код?

2. HTML был добавлен, спасибо.

3. Я обновил ваш вопрос с помощью выполняемого фрагмента кода. Без разрешающих изображений это может выглядеть не совсем идеально (не стесняйтесь редактировать, чтобы было еще более понятно, в чем проблема). Кстати, вы пробовали такие вещи, как style=»margin-right:-20px;» или что-то подобное? Или это не совсем то, что вы хотите сделать?

4. Как говорят другие, мы не уверены, где вы хотите разместить тег h1. Я добавил фрагмент кода, чтобы вы могли отредактировать его или конкретно указать, почему он не работает.

5. Не очень понятно, чего вы хотите здесь добиться. Нам нужно, чтобы вы предоставили нам больше контекста.

Ответ №1:

Если ваша цель состоит в том, чтобы таймер находился в верхнем левом углу и не влиял на другие элементы, присвойте ему свойство css position: absolute; и выполните остальную часть вашего стиля, чтобы поместить вещи туда, куда вы хотите. Таким образом, это не влияет на расположение других элементов. Я бы настоятельно рекомендовал использовать flexbox или css grid, если вы еще не изучали их. Это упрощает оформление макета.

1. @lionrocker221 Полезно отметить, что положение и размеры элемента с position:absolute относятся к содержащему его блоку, положение и размеры элемента с position:fixed всегда относятся к области просмотра. Так что любой из них будет работать, но один может быть лучше для вашего приложения. Это ваш вызов.