position: absolute скрытый overflow: hidden

[Arthur]

Приветствую всех.

Есть такой код

В блоках: container-1, и .container-2 все идентично. В блоках: .wrap-1, и .wrap-2 почти так же, за исключением блока .wrap-1 в котором добавлено overflow: hidden;

Результат вы сами видите: .wrap-1 не позволяет container-1 выползти за его границы.

В принципе по логике все ясно, просто я думал раньше что он вылезает вообще из общего потока на самый верх, но вопрос не в этом...а в том как это убрать, если мне нужно именно такие стили с  overflow: hidden; и position: absolute одновременно?

[Q4Dizzy]

А для чего используется здесь оverflow: hidden ?

 

Пишите уже полностью задумку.

[pangurban]

Именно так не сделать. Для чего тут нужен overflow?

[Arthur]

margin передается блоку родителю. Я знаю что есть другие способы отменить схлопывание margin, но дело не в нем.

Дело в том как отменить данную ситуацию и возможно ли это?

Edited October 11, 2014 by Arthur

[Q4Dizzy]

Маргин не наследуется и не передаётся родителю. Опишите, какой результат должен получится.

[Arthur]

Маргин не наследуется и не передаётся родителю. Опишите, какой результат должен получится.

 

я и не говорил что маржин наследуется.

вот статья:

http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

пункт: Вложенные элементы

 

Результат:

оверфлов: хиден не должен прятать внутренний спозиционированный блок, то есть должна ситуация быть как с .container-2 который выходит за его границы .wrap-2. То есть нужно отменить влияние оверфлов: хиден на позишн. И возможно ли вообще это сделать(например добавив какото свойство кудато из блоков).

Edited October 11, 2014 by Arthur

[Q4Dizzy]

Про это я знаю. Напишите наконец, какой должен быть результат? Потому что по разметке и css - всё правильно.

[Q4Dizzy]

Логически не могу понять... Ну позиционированные элементы - я понимаю.. Ну задавая overflow: hidden - вы как бы говорите браузеру - скрыть всё, что выходит за этот блок..

 

Исключение - position: fixed;

 

Ну или убрать у родителя относительное позиционирование..

 

и

.container-1, .container-2 {    background: none repeat scroll 0 0 #000;    height: 50px;    margin: -20px 0 0 20px;    position: absolute;    width: 50px;}

http://jsfiddle.net/m1f1etwz/1/

Edited October 11, 2014 by Q4Dizzy

[Arthur]

Про это я знаю. Напишите наконец, какой должен быть результат? Потому что по разметке и css - всё правильно.

 

Результат какой должен быть я уже писал выше.

 

Логически не могу понять... Ну позиционированные элементы - я понимаю.. Ну задавая overflow: hidden - вы как бы говорите браузеру - скрыть всё, что выходит за этот блок..

 

Исключение - position: fixed;

 

Он и скрывает, а я не хочу что бы он скрывал спозиционированый элемент, а что бы спозиционированый элемент становился над блоком родителя с оверфлов: хиден.

[pangurban]

Хочу - не хочу... Нельзя так сделать.

overflow: hidden скрывает все что выходит за пределы его элемента

[Q4Dizzy]

Хочу - не хочу... Нельзя так сделать. overflow: hidden скрывает все что выходит за пределы его элемента

 

Не всё. Написал выше пример. 

[Arthur]

Хочу - не хочу... Нельзя так сделать.

overflow: hidden скрывает все что выходит за пределы его элемента

 

дело не в моем хочу - не хочу, дело возможно ли, по тому и задал вопрос.

[Q4Dizzy]

дело не в моем хочу - не хочу, дело возможно ли, по тому и задал вопрос.

 

Ну ответ вам дали, пример тоже.

 

http://jsfiddle.net/m1f1etwz/1/

 

Если и такой вариант не устраивает - то увы.. 

Edited October 11, 2014 by Q4Dizzy

[Arthur]

 

дело не в моем хочу - не хочу, дело возможно ли, по тому и задал вопрос.

 

Ну ответ вам дали, пример тоже.

 

http://jsfiddle.net/m1f1etwz/1/

 

Если и такой вариант не устраивает - то увы.. 

 

 

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

Ведь если дописать position:relative в .wrap-1 то все будет как было, но все равно спасибо, хоть что-то, а там посмотрим.

Edited October 11, 2014 by Arthur