CSS: Як мати позицію: абсолютний div всередині позиції: відносний div не повинен бути обрізаний переливом: приховано на контейнері

143

У мене є 3 рівні div:

(Зеленим кольором внизу) Верхній рівень divс overflow: hidden. Це тому, що я хочу, щоб якийсь вміст (не показаний тут) всередині цього вікна був обрізаний, якщо він перевищує розмір поля.
(Червоним кольором внизу) Всередині цього я маю divс position: relative. Єдине використання для цього - для наступного рівня.
(Синім внизу) Нарешті, divя виймаю з потоку, position: absoluteале я хочу розміщувати відносно червоного div(не на сторінці).

Я хотів би, щоб блакитний ящик вийшов з потоку і розширився за межі зеленого поля, але розташувався відносно червоного поля, як у:

Однак, з кодом нижче, я отримую:

І видаливши position: relativeчервоне поле, тепер синє поле дозволяється виходити із зеленого поля, але воно більше не розташоване відносно червоного поля:

Чи є спосіб:

Зберігайте overflow: hiddenна зеленому полі.
Чи синій ящик розширюється за межі зеленого поля і розташовується відносно червоного поля?

Повне джерело:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Розгорніть фрагмент

css overflow css-position

— авернет
джерело

44

+1 для добре відформатованого запитання та вихідного коду

— graphicsdivine

Пояснення: Отже, ви хочете, щоб синій ящик (внутрішній найрізноманітніший) міг переповнюватися із зеленого поля (зовнішній самий дів), але зберігати перелив прихованим у зеленому полі? Отже, переповнюйте приховане все, що в зеленій коробці, Окрім синього поля, правда?

— Ентоні

Ентоні, так, саме це. І мені байдуже, що трапиться з червоною коробкою (№2), яка якраз там впливає зверху / праворуч на синій ящик (№3).

— авернет

2

+1 для належного пояснення питання, яке я вважав занадто важким для пояснення, але дуже хотів відповіді.

— Ендрю Мао

position: fixedбуде ігнорувати overflow:hiddenбудь-який елемент, що містить

— Кевін Біл

48

Трюк, який працює, полягає в тому, щоб розташувати поле №2 за допомогою, position: absoluteа не position: relative. Зазвичай ми ставимо position: relativeна зовнішній ящик (тут вікно №2), коли хочемо, щоб внутрішній ящик (тут вікно №3) position: absoluteбув розміщений відносно зовнішнього. Але пам’ятайте: щоб коробка №3 розміщувалася відносно коробки №2, ящик №2 просто потрібно розмістити. За допомогою цієї зміни ми отримуємо:

І ось повний код із цією зміною:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— авернет
джерело

5

я фактично використовував, position: staticі це працювало для мене краще

— Джейсон,

@Jason, дуже цікаво; тож ти кажеш, що використовуєш position: staticполе №2 замість position: absolute.

— avernet

1

Чи можете ви пояснити, чому absoluteне кліп, а relativeробить?

— Ендрю Мао

1

Це рішення не працюватиме, якщо ви не зробите абсолютним все, що між №1 та №3. Практично кажучи, це неможливо.

— windmaomao

1

Цікаво, яка мета пояснити щось так візуально, використовуючи такі кольори ...

— ed1nh0

5

Немає магічного рішення відображати щось поза прихованим контейнером.

Подібного ефекту можна досягти, встановивши абсолютний розміщений div, який відповідає розміру його батьківського, розташувавши його у вашому поточному відносному контейнері (div, який ви не бажаєте відсікати, повинен бути поза цим div):

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

Зверніть увагу, що якщо вам потрібно лише відсікати вміст на осі x (який, здається, є вашим випадком, оскільки ви лише встановили ширину діва), ви можете використовувати overflow-x: hidden.

— тиски
джерело

0

Я насправді не бачу способу зробити це таким, яким є. Я думаю, що вам може знадобитися вилучити overflow:hiddenз div # 1 і додати ще один div у div # 1 (тобто як брат та сестра для div # 2), щоб утримувати не вказаний "вміст" і додати його overflow:hiddenдо цього. Я не думаю, що переповнення може бути (або повинно бути здатним) перевищувати.

— graphicsdivine
джерело

0

Якщо інший вміст не відображається у зовнішньому розділі (зеленому полі), чому б не вмістити цей вміст всередині іншого div, назвемо його "content". Залиште переповнення на цьому новому внутрішньому розділі, але залиште переповнення видимим у зеленому полі.

Єдина уловка полягає в тому, що потім вам доведеться возитися, щоб переконатися, що вміст div не перешкоджає розташуванню червоного поля, але це здається, що ви повинні мати можливість це виправити з невеликим головним болем.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— Ентоні
джерело