Главная » Языки программирования

HTML

На чтение 11 мин
Содержание
  1. Как наложить один div на другой div
  2. 7 ответов
  3. Проблема
  4. Предложенное решение
  5. Обязательные знания CSS
  6. Решение
  7. Результат
  8. Альтернативное (без обертки) решение
  9. How to Overlay One Div Over Another
  10. Create HTML
  11. Add CSS
  12. Example of overlaying one over another:
  13. Result
  14. Example of overlaying one over another with hovering effects:
  15. How to Overlay One DIV Over Another DIV using CSS?
  16. Using Z-index property
  17. Example: Overlay one div to another using z-index
  18. Output
  19. Using Grid CSS
  20. Example: Overlay one div over another using Grid CSS
  21. Conclusion
  22. Как с помощью CSS наложить элементы друг на друга
  23. Способ 1. Использование свойства Position
  24. Parent
  25. Child 1
  26. Child 2
  27. Способ 2. Использование CSS Grid

Как наложить один div на другой div

Надеясь, что кто-то может помочь, но мне нужна помощь с наложением одного человека div на другого человека div . Мой код выглядит следующим образом:

К сожалению, я не могу вложить div#infoi или img внутри первого div.navi . Это должно быть два отдельных div , как показано на рисунке, но мне нужно знать, как я мог бы разместить div#infoi по div.navi и справа в самой стороне и по центру сверху div.navi . Поблагодарите любую помощь в достижении этого.

7 ответов

#container < width: 100px; height: 100px; position: relative; >#navi, #infoi < width: 100%; height: 100%; position: absolute; top: 0; left: 0; >#infoi
 
a
 
 b

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

@tonsils: инструкции alex должны дать желаемый результат, поэтому должно быть что-то еще, что вызывает проблему, которую вы описываете. Не могли бы вы предоставить нам образец кода (HTML + CSS), чтобы мы могли вам помочь?

absolute позиционированные элементы позиционируются относительно их ближайшего явно позиционированного ( position:absolute|relative|fixed ) родительского элемента. просто дальнейшие разъяснения . jsfiddle.net/p5jkc8gz

В зависимости от случая это может быть адаптировано. В моей ситуации мне не нужно, чтобы #navi был top: 0 left: 0, и в общем случае, если у вас есть HTML-код, он будет находиться до тех пор, пока HTML-дерево анализируется. Так что, возможно, в этом случае это определение не является необходимым.

@ Ответ BrettDeWoody в ниже намного превосходит этот: Это не только гораздо более тщательно детализированы, в том числе , как и зачем это делать, но его ответ также позиционирует накладку в верхнем правом углу , как просил ОП — что этот ответ не делать. Голосуй за ответ Бретта, а не этот!

Принятое решение отлично работает, но у ИМО нет объяснений, почему он работает. Приведенный ниже пример сводится к основам и отделяет важный CSS от неулокального стиля CSS. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.

TL;DR; если вы хотите только код, прокрутите вниз до «Результат».

Проблема

Есть два отдельных элемента: sibling, elements, и цель состоит в том, чтобы позиционировать второй элемент (с id infoi ), чтобы он отображался в предыдущем элементе (тот, у которого был class navi ). Структура HTML не может быть изменена.

Предложенное решение

Для достижения желаемого результата мы будем перемещать или позиционировать второй элемент, который мы будем называть #infoi чтобы он отображался в 1-м элементе, который мы будем называть .navi . В частности, мы хотим, чтобы #infoi располагался в верхнем правом углу .navi .

Читайте также:  Php remove first array elements

Обязательные знания CSS

CSS имеет несколько свойств для позиционирования элементов. По умолчанию все элементы имеют position: static . Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.

Другие значения position являются relative , absolute и fixed . Установив position элемента для одного из этих 3 значений, теперь можно использовать комбинацию из следующих 4 свойств для позиционирования элемента:

Другими словами, установив position: absolute , мы можем добавить top: 100px чтобы поместить элемент 100px из верхней части страницы. И наоборот, если мы установим bottom: 100px элемент будет располагаться на 100px в нижней части страницы.

Здесь, где многие новички CSS теряются — position: absolute имеет систему отсчета. В приведенном выше примере, система отсчета является body элемента. position: absolute с top: 100px означает, что элемент расположен на 100px от верхней части элемента body .

Позиционный кадр ссылки или контекст позиции можно изменить, установив position родительского элемента на любое значение, отличное от position: static . То есть мы можем создать новый контекст позиции, предоставив родительский элемент:

Например, если элементу задана position: relative , любые дочерние элементы используют качестве своего контекста позиции. Если дочернему элементу задана position: absolute и top: 100px , элемент будет располагаться 100px от вершины элемента , потому что теперь является контекстом позиции,

Другим фактором, о котором следует знать, является порядок стека — или как элементы сложены в z-направлении. Обязательным знанием здесь является порядок стека элементов по умолчанию, определяемый обратным порядком в структуре HTML. Рассмотрим следующий пример:

В этом примере, если два элемента

были размещены в одном и том же месте на странице, элемент
Top

будет охватывать элемент

Bottom

. Поскольку

Top

появляется после

Bottom

в структуре HTML, он имеет более высокий порядок стекирования.

Порядок укладки может быть изменен с помощью CSS с использованием свойств z-index или order .

Мы можем игнорировать порядок укладки в этой проблеме, поскольку естественная структура HTML элементов означает, что элемент, который мы хотим отображать top приходит после другого элемента.

Итак, вернемся к проблеме — мы будем использовать контекст позиции для решения этой проблемы.

Решение

Как указано выше, наша цель — позиционировать элемент #infoi чтобы он отображался в элементе .navi . Для этого мы #infoi элементы .navi и #infoi в новый элемент чтобы мы могли создать новый контекст позиции.

Затем создайте новый контекст позиции, .wrapper position: relative .

С этим новым контекстом позиции мы можем позиционировать #infoi внутри .wrapper . Сначала дайте #infoi position: absolute , позволяющую нам позиционировать #infoi абсолютно в .wrapper .

Затем добавьте top: 0 и right: 0 чтобы #infoi элемент #infoi в верхнем правом углу. Помните, поскольку элемент #infoi использует .wrapper качестве своего контекста позиции, он будет находиться в правом .wrapper элемента .wrapper .

Поскольку .wrapper — это просто контейнер для .navi , позиционирование #infoi в верхнем правом углу .wrapper дает эффект размещения в верхнем правом углу .navi .

И там у нас это, #infoi теперь находится в верхнем правом углу .navi .

Результат

Пример ниже сводится к основам и содержит некоторые минимальные стили.

/* * position: relative gives a new position context */ .wrapper < position: relative; >/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: absolute; top: 0; right: 0; /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; >

Альтернативное (без обертки) решение

В случае, если мы не можем редактировать любой HTML, то есть мы не можем добавить элемент оболочки, мы все равно можем добиться желаемого эффекта.

Читайте также:  Index html list all files

Вместо использования position: absolute в элементе #infoi , мы будем использовать position: relative . Это позволяет нам переместить элемент #infoi из его позиции по умолчанию под элементом .navi . С position: relative мы можем использовать отрицательное top значение, чтобы переместить его из его позиции по умолчанию, а left значение 100% минус несколько пикселей, используя left: calc(100% — 52px) , чтобы расположить его рядом с правой кнопкой мыши, боковая сторона.

/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; width: 100%; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: relative; display: inline-block; top: -40px; left: calc(100% - 52px); /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; >

Источник

How to Overlay One Div Over Another

Creating an overlay effect for two elements can be easily done with CSS. This can be done with the combination of the CSS position and z-index properties. The z-index of an element defines its order inside a stacking context. In our examples, we’ll use the “absolute” and “relative” values of the position property and add the z-index property to specify the stacking order for the positioned elements.

Create HTML

  • Use a element with the class named “container”.
  • Add two other elements within the first one. Add classes to them as well.
div class="container"> div class="box"> div> div class="box overlay"> div> div>

Add CSS

  • Specify the width and height of the «container» class. Set the position to «relative» and add the margin property.
  • Set both the width and height of the «box» class to «100%». Specify the position with the «absolute» value. Add the top and left properties. Also, specify the background and opacity of the «box» class.
  • Style the «overlay» class by using the z-index , margin and background properties.
.container < width: 150px; height: 150px; position: relative; margin: 30px; > .box < width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; > .overlay < z-index: 9; margin: 30px; background: #009938; >

Now, we can bring together the parts of our code.

Example of overlaying one over another:

html> html> head> title>Title of the document title> style> .container < width: 150px; height: 150px; position: relative; margin: 30px; > .box < width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; > .overlay < z-index: 9; margin: 30px; background: #009938; > style> head> body> div class="container"> div class="box"> div> div class="box overlay"> div> div> body> html>

Result

Let’s see another example where we use a bit more CSS. Here, we add some hovering effects using the CSS :hover pseudo-class.

Example of overlaying one over another with hovering effects:

html> html> head> title>Title of the document title> style> .container < position: absolute; height: 250px; width: 400px; background-color: #7d807e; > .box1 < color: #fff; padding-top: 60px; padding-left: 50px; font-size: 50px; font-weight: bold; > .box2 < padding-left: 50px; > .box1:hover < z-index: -1; opacity: 0.5; font-size: 30px; text-align: center; transform-style: all; transition-duration: 2s; > .box2:hover < z-index: -1; opacity: 0.3; font-size: 40px; text-align: center; transform-style: all; transition-duration: 2s; > style> head> body> div class="container"> div class="box1">W3Docs div> div class="box2">Learn programming div> div> body> html>

Источник

Читайте также:  Java get string from string list

How to Overlay One DIV Over Another DIV using CSS?

Sometimes we need to overlay one div to another in a webpage then we can do this easily by using CSS. In this tutorial, we will be learning about the properties used to overlay one div over another.

Using Z-index property

The z-index property of CSS can be used to overlay one div over another. Add z-index value to the div element with position attributes. The z-index determine the order in which div stacks.

Example: Overlay one div to another using z-index

The div with the z-index value will be placed above to another div. Here is the program to illustrate this.

     .container < width: 100px; height: 100px; position: relative; >.inner, .outer < width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: blue; >.inner  
Overlay one div over another

Output

Here is the output of the above program.

div overlay

Using Grid CSS

The Grid CSS can also be used to overlay one div over another. So use grid-area property to the div element and also add display: grid to the container class.

Example: Overlay one div over another using Grid CSS

In this program, we have used grid CSS property to overlay one div over another.

Conclusion

In this tutorial, we have used CSS properties to overlay one div over another. We can do so using Z-index or grid-area properties to do so.

Источник

Как с помощью CSS наложить элементы друг на друга

При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.

Способ 1. Использование свойства Position

Свойство position со значением absolute разместит абсолютно позиционированный элемент на странице. В этом случае указывается позиция элемента относительно левого верхнего угла веб-страницы.

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

Также этот подход можно использовать для размещения одного элемента поверх другого. Например, два дочерних элемента, расположенных друг над другом, один из которых будет смещен на 150 пикселей. Они располагаются в одном родительском элементе и остаются внутри него.

Parent

Child 1

Child 2

.child < position: absolute; top: 0; >.child-1 < left: 0; >.child-2 < left: 150px; >.parent

Способ 2. Использование CSS Grid

Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.

С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:

И если один элемент должен накладываться на другой, то нужно поместить их в одну область сетки. Давайте также немного сместим элемент, используя отступ.

Для облегчения позиционирования я создал CSS Grid Generator , который поможет вам визуально сконструировать необходимый макет.

Описанные выше методы позволяют накладывать элементы, создавать слои, управлять смещением элементов и их расположением на любой веб-странице.

Источник

Оцените статью
© 2023 Программирование