Как сделать чтобы блоки не видели друг друга?

@Silhouette · Регистрация: 20.11.2014

Author24 — интернет-сервис помощи студентам

Написал скрипт, который вставляет блоки разных размеров, цветов и с различными выравниваниями и отступами.
Убил 2 дня 400 строк кода на пхп. Только что понял, что я не учел маленькую деталь, потому все работает некорректно.

Суть проблемы.
Есть родительский блок, квадрат 450 на 450.
В него вставляются блоки поменьше.
В самом начале я подумал "так, элементы с position:relative" выпадают из потока и другие элементы их не видят.
Основываясь на этом написал кучу кода.
Только что закончил, протестировал и оказалось, что два блока с относительным позиционированием друг друга то видят.
Потому отступы, которые я задавал, работают неправильно. Т.е. второй блок отступает не от верхнего левого края родительского блока, а от блока перед ним.
Подскажите решение, чтобы минимально курочить код.

Заранее спасибо

@Glart · 17.12.2015, 17:55

Если правильно понял суть проблемы, то у родителя:

CSS

1	position:absolute;

@Silhouette · 17.12.2015, 18:12 **[ТС]**

А как это поможет?

Обьясню еще раз на примере.

Вот набросал аналогичный код, чтобы было понятно:

HTML5

<div id="parent">
    <div id="block1"></div>
    <div id="block2"></div>
</div>

CSS

#parent{
height:450px;
width:450px;
border: 1px solid #000;
 
}
 
#block1, #block2{
position:relative;
float:left;
}
 
#block1{
height:150px;
width:150px;
}
 
#block2{
height:150px;
width:450px;
top:150px;
}

Ожидалось (как выяснилось, ожидалось по глупости):

Как сделать чтобы блоки не видели друг друга?

На деле:

(Сетка и нумерация ячеек 150х150 лишь для наглядности размеров)

@Glart · 17.12.2015, 18:16

Ожидался первый вариант или второй?

У меня ваш код выводит на экран, как на первом изображении.

@Silhouette · 17.12.2015, 18:21 **[ТС]**

ожидалось как на первом фото

в результате работает как второе фото

проверил, вот результат:

то есть второй блок отступает от первого, а я планировал, что будет отступать от родителя

@Glart · 17.12.2015, 18:22

Вот тут результат. Как на первом фото. Браузер Опера.

@Karssen · 17.12.2015, 18:31

Glart, ну дык ты top:150px убрал))
Silhouette, Вообще я не понял зачем тут позиционирование? Идти друг за другом это естественное поведение блочных элементов. Не задвай никакого позиционирования и они будут идти друг за дружкой. И зачем float:left если нужно чтоб они не занимали пространство рядом?

@Silhouette · 17.12.2015, 18:34 **[ТС]**

хром и фаерфокс отображают как на моем скрине

Добавлено через 1 минуту
Karssen, скрипт генерирует блоки по заданным параметрам
придется все переделывать под абсолютное позиционирование

@Glart · 17.12.2015, 18:36

Сообщение от Karssen

ну дык ты top:150px убрал))

Я скопировал код с этого поста .

@Karssen · 17.12.2015, 18:39

Glart, тогда магия ) потому что в посте

CSS

#block2{
height:150px;
width:450px;
top:150px;
}

А в вашем примере

CSS

#block2{
height:150px;
width:450px;
}

Добавлено через 1 минуту
Silhouette, Зачем вы здесь используете позиционирование, если вам нужно чтоб блоки шли друг за другом? Или приведите конечный вариант того что нужно. Потому для того что на картинке не нужно никакое позиционирование

@Glart · 17.12.2015, 18:44

Тогда вариант.

Добавлено через 50 секунд

CSS

1	float:left;

Можно вернуть.

@Silhouette · 17.12.2015, 18:44 **[ТС]**

Karssen, на вход скрипта подается массив, в котором указаны номера ячеек, которые должен занимать блок (на фото выше есть сетка)

например 1,2 и 6,9 должно отрисоваться в

@Silhouette · 17.12.2015, 18:46 **[ТС]**

второе изображение случайно прикрепил

@Glart · 17.12.2015, 18:47

Сообщение от Silhouette

например 1,2 и 6,9 должно отрисоваться в

В таком случае float:left; лучше вообще убрать. И мой пример будет работать. Только еще left отступ указывать.

@Silhouette · 17.12.2015, 18:48 **[ТС]**

Glart, это будет работать только если родительский блок расположен вверху страницы
у меня он посреди страницы
то есть либо переносить его вверх (что проще)
либо переделывать все отступы с учетом позиционирования родительского блока

@Karssen · 17.12.2015, 18:50

Silhouette, Интересная задача. Тогда тут есть 2 варианта решения. Самый кроссбраузерный это конечно позиционирование. Но в вашем случае выглядеть это должно так приблизительно

CSS

#parent{
height:450px;
width:450px;
border: 1px solid #000;
position:relative;
}
 
[id*=block]{
border:1px solid red;
position:absolute;
}
 
#block1{
height:150px;
width:150px;
}
 
#block2{
height:150px;
width:450px;
top:150px;
}

Можно еще сделать на flex. Но это посложнее будет

@Silhouette · 17.12.2015, 18:51 **[ТС]**

в общем, перенес блок в начало страницы
в течении минуты переделал, работает как мне нужно
хоть php-код не нужно трогать

спасибо за помощь

@Glart · 17.12.2015, 18:51

Еще вариант. Не с верху страницы (тот же самый, но с отступом)

@Silhouette · 17.12.2015, 18:53 **[ТС]**

Glart, в этом случае у меня дочерние блоки отступают от верхнего края и располагаются вне родителя

@Glart · 17.12.2015, 18:54

Сообщение от Silhouette

отступают от верхнего края и располагаются вне родителя

Я не понимаю... У меня что ли браузер особенный?

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:46 [ТС]	13
	второе изображение случайно прикрепил 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:53 [ТС]	19
	Glart, в этом случае у меня дочерние блоки отступают от верхнего края и располагаются вне родителя 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:16	4
	Ожидался первый вариант или второй? У меня ваш код выводит на экран, как на первом изображении. 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:21 [ТС]	5
	ожидалось как на первом фото в результате работает как второе фото проверил, вот результат: то есть второй блок отступает от первого, а я планировал, что будет отступать от родителя 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:22	6
	Вот тут результат. Как на первом фото. Браузер Опера. 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	17.12.2015, 18:31	7
	Glart, ну дык ты top:150px убрал)) Silhouette, Вообще я не понял зачем тут позиционирование? Идти друг за другом это естественное поведение блочных элементов. Не задвай никакого позиционирования и они будут идти друг за дружкой. И зачем float:left если нужно чтоб они не занимали пространство рядом? 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:34 [ТС]	8
	хром и фаерфокс отображают как на моем скрине Добавлено через 1 минуту Karssen, скрипт генерирует блоки по заданным параметрам придется все переделывать под абсолютное позиционирование 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:36	9
	Сообщение от Karssen ну дык ты top:150px убрал)) Я скопировал код с этого поста . 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:44 [ТС]	12
	Karssen, на вход скрипта подается массив, в котором указаны номера ячеек, которые должен занимать блок (на фото выше есть сетка) например 1,2 и 6,9 должно отрисоваться в Миниатюры 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:47	14
	Сообщение от Silhouette например 1,2 и 6,9 должно отрисоваться в В таком случае float:left; лучше вообще убрать. И мой пример будет работать. Только еще left отступ указывать. 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:48 [ТС]	15
	Glart, это будет работать только если родительский блок расположен вверху страницы у меня он посреди страницы то есть либо переносить его вверх (что проще) либо переделывать все отступы с учетом позиционирования родительского блока 0

@Silhouette 0 / 0 / 0 Регистрация: 20.11.2014 Сообщений: 31
	17.12.2015, 18:51 [ТС]	17
	в общем, перенес блок в начало страницы в течении минуты переделал, работает как мне нужно хоть php-код не нужно трогать спасибо за помощь 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:51	18
	Еще вариант. Не с верху страницы (тот же самый, но с отступом) 0

@Glart В поисках себя 115 / 89 / 34 Регистрация: 12.11.2015 Сообщений: 529
	17.12.2015, 18:54	20
	Сообщение от Silhouette отступают от верхнего края и располагаются вне родителя Я не понимаю... У меня что ли браузер особенный? 0

Как сделать чтобы блоки не видели друг друга?

Решение