Можно ли div вложить в div

Обновлено: 19.04.2024

Мне нужна помощь с наложением одного человека div на другого div .

Мой код выглядит так:

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

Я бы предложил изучить position: relative и дочерние элементы с position: absolute .

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

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

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

TLDR; если вам нужен только код, прокрутите вниз до «Результат» .

Проблема

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

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

CSS Позиция Требуется Знание

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

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

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

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

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

position: relative;
position: absolute;
position: sticky;
position: fixed;

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

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

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

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

Top

элемент будет покрывать

Bottom

элемент. Так

Top

как

Bottom

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

Для блочных элементов характерны следующие особенности.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет как универсальный кирпичик вёрстки. Тег допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь . В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега

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

и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги

, а пунктиром — анонимный блок.

Рис. 3.23. Блоки в документе

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height . В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).

Рис. 3.24. Ссылка как блочный элемент

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

надеюсь, кто-то может помочь, но мне нужна помощь с наложением одного человека div над другим человеком div .

мой код выглядит так:

был бы признателен за любую помощь в достижении этого.

Я бы предложил узнать о position: relative и дочерние элементы с position: absolute .

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

TLDR; если вам нужен только код, прокрутите вниз до Результат.

Проблема

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

Предлагаемое Решение

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: absolute;
position: relative;
position: fixed;

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

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

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

элементы были расположены в том же месте на странице

Top

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

Bottom

элемент. С

Top

после

Bottom

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

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

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

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

Решение

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

Результат

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

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

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

С помощью div стиль z-index:1; и position: absolute; вы можете наложить свой div на любой другой div .

z-index определяет порядок, в котором divs 'stack'. Div с более высоким z-index появится перед div с более низким z-index . Обратите внимание, что это свойство работает только с позиционированными элементами.

CSS!? Div в div'e, как не потерять позиции css внутреннего div'a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а.

перекрывает 2 других . Не отображается
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN".

Резиновый размер div'a, размер div'a в зависимости от расположения div'ов в нем
Надо чтобы div "telo" растягивался в зависимости от дивов которые находятся в нем. тоесть должен.

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

Все атрибуты должны быть в кавычках. Особенно такие, в которых есть пробелы и прочие небуквенные символы.

Crudelis=) Молодец.
А у меня по твоему как сделано?=) Я думал, что прежде чем кто-то ответит сначала поймет вопрос, спс конечно, но это не то.
Humanoid, было у меня так сделано, толку нету, мой вопрос так не решается.

Объясни получше, какой результат ты хочешь получить. Что бы один блок закрывался другим? Или просто маленький блок внутри большого?
Сейчас оба внутренних блока вылезают за предел внешнего из-за того, что внешнему указаны width и height, которые меньше, чем в внутренних.

Да, мне надо чтобы они перекрывали друг друга, ну то есть 1ый закрывал 2ой(или наоборот)

Добавлено через 2 минуты
Ладно изменил вот так

Во-первых, все атрибуты должны быть в кавычках.
Во-вторых, ко всем размерам нужно писать еденицы измерения. Нежелательно писать "800", гораздо лучше написать "800px".
Во-третьих, такой код ничего не даст. positioin:relative; смещает блок относительно текущего местоположения. У тебя стоит top: 0; left: 0, то есть отсносительно текущего местоположения они не двигаются. Чтобы выровнять блоки по левому и верхнему краям родительского элемента нужно использовать position: absolute; для дочерних, и positioin:relative; для родительсткого элемента.

То есть в итоге все должно быть так:

P.S. Писать стили на одной странице с html, да еще и в атрибуте style — очень дурной тон. На форуме чтобы долго не писать можно привести такой пример, но в итоговом коде лучше такого не делать. За такое надо сразу далеко посылать верстальщика.

Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу).

Показать второй div-sidebar перед первым div-content на CSS
Как в данном примере можно с помощью CSS показать блок сайдбара первым, перед блоком контента, не.

Растянуть div в высоту на 100% или на занимаемое пространство вложенного div
Ситуация такая, есть див-1, в нем несколько дивов. Див-1 осуществляет роль фоновой картинки(т.е.

Растянуть div col-xs-4 во всю высоту div row (bootstrap)
Здравствуйте Как сделать <div во всю высоту <div <div.

Но ведь как-то же можно обойтись одним циклом? Весь день вчера голову ломал но так путного ничего и не смог придумать. Помогите пожалуйста.

Обернуть все iframe плеера в div
Подскажите какой-нибудь кодик, чтобы обернуть все плеера на страницах в див с классом. Например.

Обернуть в div все картинки на странице
Сабж. Натолкните на мысль, пожалуйста.

Одним div выровнить внутрение div
У меня проблема, у меня div за место таблицы на сайте сайт работает отлично. Тока вот сайт с левой.

Решение

Да. JS жестко учит алгоритмическому мышлению.
Догадаться о поведении заменяемых элементов почти нереально ))

Добавлено через 4 минуты
Mr_Sergo, здесь очень тонкое различие между интерфейсами HTMLCollection и NodeList. И между querySelectorAll() и getElementsByClassName().
Я недавно на поиск различий между ними тоже полдня убил )))))

Решение

вот что-то такое я вчера пробовал, только не получилось за 1 цикл сделать- как я сейчас понимаю дело, наверное, было в том что вместо getElementsByClassName нужно было использовать querySelectorAll

Допустим заменяемый элемент или один из его внутренних элементов часто используется в коде и поэтому для того, чтобы не искать его каждый раз, ссылка на него где-то сохранена в переменной. После такого преобразования ссылка работать не будет.
Иногда в элементах сохраняются какие-то данные путем добавления новых свойств. Такие данные в разметке не отображаются и после такой замены будут потеряны.
Если в коде добавлены обработчики событий каких-то из элементов с помощью addEventListener, то эти подписки тоже пропадут.

timen,
Интересный подход
Только вот если внутри дива с классом green появится какое-то содержимое, например:

то, к сожалению, ваш код уже не работает, что не есть гуд.

Добавлено через 4 минуты
Сможете регулярку дописать:

Добавлено через 2 минуты
[\s\S] потому что MS Edge не понимает ключ s, ослина такая. Ну ничего, скоро его на Chromium переведут.

Mr_Sergo, кстати, подводный камень регулярных выражений именно в JS - они не считают соответствие закрывающих тегов. Это вам не PHP, понимаешь.
Не любое содержимое подойдёт. div нельзя вкладывать.

Да регулярка везде по сути одна.
Там если любой символ в жадном режиме (.*\/div>)
- то тот див будет самый последний в тексте а не текущий,
так что тогда нужен ленивый режим (.*?\/div>)

Как в цикле каждый 4-й элемент обернуть в div?
Задача простая: обвернуть 4 элемента массива (продукта) в блок .item (это будет один слайд) .

Обернуть в div то, что после переноса
Здравствуйте. Предположим есть текст текст текст текст текст текст текст текст текст текст мне.

Вычисление выражения с=(a+b mod a*4+b div a) div 2-a div 160
Пожалуйста, посмотрите на код, уввжаемые! нужно вычислить такое выражение: с=(a+b mod a*4+b div a).

Автор статьи

Куприянов Денис Юрьевич

Юрист частного права

Страница автора

Читайте также: