Как сделать ребенка div абсолютным?

Question

Как сделать ребенка div абсолютным?

0

Я пытаюсь сделать форму поиска отзывчивой. Попробуйте сделать child div absolute чтобы я мог позиционировать его в любом месте, которое я хочу. Вот сайт, есть форма поиска с div #search-near, я хочу разместить его под 2-ой навигацией и перед контентом.

как это

user1708597 17 дек. 2013, в 13:49

Источник

0

Предоставьте скриншот того, как вы хотите.
Nitesh 17 дек. 2013, в 12:04
0

проверить это
Free-Minded 17 дек. 2013, в 12:17

Теги:

html

css

2 ответа

Ещё вопросы

Предоставьте скриншот того, как вы хотите.

Matyas · Answer 1 · 2013-12-17T10-26-00.000Z

Проблема в том, что position: absolute; будет позиционировать ваш элемент относительно первого позиционного (non- static) предка, который находится в вашем случае .right-container.

Подробнее об absolute позиционировании

Итак, чтобы начать:

вы должны удалить position: relative от .right-container.
Удалите margin-top: -600px из #search-near
Добавьте padding-top: 320px к #page-content чтобы сделать #search-near некоторым местом
Все эти модификации должны активироваться на экранах <[независимо от того, что вы определили]

Результат:

РЕДАКТИРОВАТЬ:

Если у вас есть на странице #under-slideshow-box:

Тогда позиционированный элемент должен быть .home-content. Например. Добавить position: relative нее (если она еще не позиционирована). Элементы на пути до #search-near должны иметь static позиционирование по умолчанию.
.home-content должен получать отступы
Все еще важно (как и в первом случае): #search-near должен располагаться absolute с top: 0

Результат:

Я только что понял, что сделал изменения на другой странице , которая не содержит #under-slideshow-box
Мне кажется трудно установить положение для всех страниц, работает только домашняя страница :(
Да, это определенно не общий ответ. Вы должны проанализировать желаемое поведение и соответствующим образом адаптировать иерархическую структуру элементов, чтобы их расположение соответствовало вашим потребностям. Или вы всегда можете выбрать более уродливое решение, просто включив разные стили для каждого типа страницы.

siannone · Answer 2 · 2013-12-17T09-17-00.000Z

Вы можете использовать селектор nth-child:

Например:

div:nth-child(1) {

    position: absolute;
    /* More CSS here */
}

Дополнительная информация здесь.