Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
1

Как связать блоки position: absolute; и position: relative; ?

09.06.2018, 17:46. Просмотров 991. Ответов 16
Метки нет (Все метки)

Имеется слайдер position: absolute;. Картинка слайдера уменьшается пропорционально при уменьшении ширины экрана width: 100%;. Как привязать следующий блок position: relative; к слайдеру? Или как задать величину top: привязки к предыдущему блоку в зависимости от изменения размеров картинки?

Извините, верстаю первый раз.
Не знаю как вставить код - он большой.


Попытался вставить файлы html и css - не получилось
0
Миниатюры
Как связать блоки position: absolute; и position: relative; ?   Как связать блоки position: absolute; и position: relative; ?   Как связать блоки position: absolute; и position: relative; ?  

Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.06.2018, 17:46
Ответы с готовыми решениями:

В каком случае рекомендуется использовать :margin,padding,float,position:absolute,position:relative
В каком случае рекомендуется использовать...

Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами position-absolute. Вопрос:...

Блоки relative и position внутри блока с position: relative
Всем привет! Я новичок, верстаю свой первый сайт (http://cosmetolog.cu.cc/). У меня возник...

position absolute под relative
Реально ли сделать, чтобы абсолютный блок лежал под relative в таком коде? <div style="position:...

Меняю position:relative на absolute и вложенный блок сдвигается вниз
Здравствуйте, столкнулась с такой проблемой: когда меняю у родительского блока (class="business")...

16
mrtoxas
Модератор
Эксперт HTML/CSS
2854 / 2090 / 1282
Регистрация: 12.07.2015
Сообщений: 5,642
Записей в блоге: 3
09.06.2018, 19:54 2
Цитата Сообщение от Mihail51 Посмотреть сообщение
Не знаю как вставить код - он большой.
Архив с прикрепите к сообщению. Если по размеру не влезет, тогда залейте его на приличный файлообменник и дайте ссылку.
1
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
09.06.2018, 20:43  [ТС] 3
Спасибо, не додумался.
0
Вложения
Тип файла: rar Готовые.rar (1.70 Мб, 2 просмотров)
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 11:01 4
Mihail51, Вы это сами сверстали или где то взяли код?
1
10.06.2018, 11:01
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 11:08  [ТС] 5
Сам сверстал. Это моя, фактически, первая верстка.
0
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 11:13 6
Mihail51, а почему у Вас сброс стилей повторяется 12 раз, а блок container переопределяется 4 раза?
Почему комментарии не закрыты и почему если закрыть комментарии в HTML, то у Вас напрочь слетает слайдер, как они могут быть между собой связаны?
1
Миниатюры
Как связать блоки position: absolute; и position: relative; ?   Как связать блоки position: absolute; и position: relative; ?   Как связать блоки position: absolute; и position: relative; ?  

Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 11:31  [ТС] 7
Дело в том, что это только часть верстки. Я сначала сверстал страницу, а потом разбил ее на секции и сейчас работаю с каждой секцией отдельно и свожу их вместе по мере готовности. Это третья секция - на ней я застопорился.
Блок контейнер присутствует в каждой секции. Его назначение - упорядочить расположение контента.
Насчет сброса стилей не могу пока сказать. Я его прикрепляю к каждому файлы css. Но код не могу посмотреть, к. к. нахожусь на работе.
Не уверен, что отвечал именно на тот вопрос, который задан. Извини, пока знаний недостаточно. Если неправильно ответил - объясни. Я пока чайник.
0
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 11:32 8
А проблема Ваша заключается в следующем: когда Вы абсолютно позиционируете слайдер (рис.1) он перестает существовать в потоке документа и его положение задается относительно краев Вашего браузера и все ниже лежащие блоки будут находится под слайдером и для этого Вы ниже лежащему блоку задаете position: relative; top: 660px; (рис.2) тем самым Вы опускаете секцию service на 660px вниз (отталкиваясь не от Вашего слайдера, а от блока с меню) и так как у Вас все блоки резиновые и при уменьшении ширины окна браузера они сжимаются, а секция service остается верна своему положению, то есть top: 660px;. Так что тут дело в позиционировании, пересмотрите свою верстку.
p.s. Слайдер лучше верстать на Java Script или использовать уже сделанные за Вас (забыл как они называются )
https://owlcarousel2.github.io/OwlCarousel2/
http://kenwheeler.github.io/slick/
0
Миниатюры
Как связать блоки position: absolute; и position: relative; ?   Как связать блоки position: absolute; и position: relative; ?  
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 11:48 9
Mihail51,
Цитата Сообщение от Mihail51 Посмотреть сообщение
Насчет сброса стилей не могу пока сказать. Я его прикрепляю к каждому файлы css
Смотри, у тебя есть 4 css файла (рис.2). Возьми и объедини их все в один css файл, назови его styles.css. Эти файлы у тебя подключены в HTML (рис.1) и достаточно будет подключить один файл styles.css, без всяких на то @import... А ты случайно не используешь какие нибудь препроцессоры (SASS, LESS)?

Добавлено через 4 минуты
Mihail51, Или если Вам так удобнее, просто в каждом css файле поубирайте все импорты:
CSS
1
2
3
@import url("fonts.css");
@import url("reset.css");
@import url("heder.css");
0
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 11:50  [ТС] 10
Я понимаю причину. Я пытался сделать слайдер position:relative; . Он работает нормально. Но он у меня по PSDдолжен заходить под меню в хедере. Только поэтому я сделал его position:absolute.
Черт, не успеваю отвечать. Долго писать в телефоне
0
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 11:51 11
На досуге можете почитать про импорт и почему не стоит его использовать https://habr.com/post/57012/

Добавлено через 38 секунд
Цитата Сообщение от Mihail51 Посмотреть сообщение
Долго писать в телефоне
я не спешу
0
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 11:58  [ТС] 12
Я сейчас делаю импорт и привязка каждого файла пока. Я просто боюсь запутаться. У меня порядка 10-12 блоков. Я планировал, когда о работаю всю правку и адаптацию удалить все лишнее. К тому же в сайте примерно 8-10 страниц в которых повторяется все блоки из этой страницы. Поэтому я не свожу файлы css в один. У меня был один - я его разбил на отдельные
0
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 12:03 13
Mihail51,
Цитата Сообщение от Mihail51 Посмотреть сообщение
Но он у меня по PSDдолжен заходить под меню в хедере.
Тогда почему нельзя слайдер сделать position: relative; с отрицательным значением top; и каким нибудь z-index? Только пр этом у Вас вылезет куча подводных камней в виде лишних отступов и если начать их убирать, то можно слишком глубоко залезть и сломать низ лежащие блоки, так что тут, да, лучше будет переверстать (как на мой взгляд, может Вы найдете другое решение)
0
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 12:03  [ТС] 14
Кстати, слайдер я собрал. Только немного переделал его под свои требования. Сам пока его не совсем понял. Знаешь, тяжело в почти 70 лет осваивать то, чем никогда не занимался. Тем более самостоятельно.
0
Freeze_Breeze
268 / 264 / 104
Регистрация: 12.01.2016
Сообщений: 1,551
10.06.2018, 12:04 15
Mihail51,
Цитата Сообщение от Mihail51 Посмотреть сообщение
Знаешь, тяжело в почти 70 лет осваивать то, чем никогда не занимался
А с чего вдруг начали?
0
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
10.06.2018, 12:16  [ТС] 16
Да. Видимо придется искать другое решение. Я просто рассчитывал, что может можно сделать величина top переменной в зависимости от высоты картинки слайдера.
Попробую по-другому залезть под меню хедера. Возможно получится.
Спасибо большое за ответы.

Добавлено через 3 минуты
Скоро на пенсию. Сколько я еще протяну у станка. Возможно сумею хоть так подработывать
0
Mihail51
0 / 0 / 0
Регистрация: 09.06.2018
Сообщений: 30
12.06.2018, 07:52  [ТС] 17
Всем спасибо! Проблему решил по-другому. Просто поставил слайдер в position: relative;. А проблема, возникающая при этом решалась значительно проще.
0
12.06.2018, 07:52
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.06.2018, 07:52

Как сделать адаптивным контент с position absolute?
Добрый день, при absolute ,текст съезжает на нижнюю секцию, когда я масштабирую, как сделать, чтоб...

position: relative; в IE
есть меню состоящие из div`ов cо свойством display:none при наведении на некую область ява меняет...

Div и position: relative
Ребята, помогите разобраться новичку. <div id="header_logo"> <a...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru