получить абсолютный div вне относительного родителя

У меня есть элемент position:relative с именем #container. Причина, по которой это относительная, заключается в том, что мне нужно, чтобы она имела z-index, чтобы она перекрывала тень, которую у меня есть на моей странице.получить абсолютный div вне относительного родителя

У меня также есть всплывающая подсказка с именем #outside, что я хотел бы расположить за пределы #container но JavaScript позиции подсказки добавляет DOM внутри #container.

Кто-нибудь знает, как я могу достичь overflow-y:scroll, но получить #outside буквально за пределами моего элемента?

Не имеет значения, как я это делаю, если у моего #container может быть z-индекс, чтобы он перекрывал мою тень.

Вот мой jsfiddle (тень не в этой скрипкой)

HTML

<div id="container">hi 
    <br />hi 
    <br />hi 
    <br />hi 
    <br />hi 
    <br />hi 
    <br /> 
    <div id="outside">outside</div> 
</div>

CSS

#container { 
    z-index:9; 
    position:relative; 
    border:1px solid red; 
    width:50px; 
    height:100px; 
    overflow-y:scroll; 
    overflow-x:visible; 
} 
#outside { 
    position:absolute; 
    top:10px; 
    left:75px; 
}

источник

2015-04-24 bryan

Я не считаю, что можно сделать то, о чем вы думаете, без какого-либо взломанного решения - абсолютно позиционированный элемент внутри элемента с 'position: relative' будет размещаться в соответствии с родительским div. И заставить его появляться снаружи, когда у вас переполнение скрыто, невозможно. Однако почему бы не применить 'z-index' к элементу с' position: absolute' (я имею в виду родительский элемент здесь)? –

@TimMcClure У меня нет 'overflow: hidden'? Я могу применить или отнять все. Мне просто нужно '# container', чтобы грациозно пройти через тень div (следовательно,' z-index: 9') – bryan

Ой, прошу прощения, неправильно, когда вы сказали 'overflow-y: scroll'. Можете ли вы поместить тень в jsfiddle, чтобы я мог видеть, на что вы ссылаетесь? В чем проблема с применением 'z-index' к элементу с' position: absolute'? –

Обсуждается в комментариях реальная проблема - установка overflow-y:scroll также скрывает элементы по оси x. Обходной путь состоит в том, чтобы обернуть элементы, которые вы хотите прокрутить, в свой собственный div-wrapping div. См. jsfiddle

источник

2015-04-24 17:58:48

Спасибо, Тим! – bryan

-1

Вы могли бы использовать фиксированное позиционирование вместо этого?

... 
#outside { 
    position:fixed; 
    top:10px; 
    left:75px; 
}

При необходимости некоторые анимации js при прокрутке могут содержать их там, где вы хотите.

источник

2015-04-24 17:58:30

OP заявила в комментариях о том, что 'position: fixed' не будет работать в его случае. –

получить абсолютный div вне относительного родителя

ответ

Смежные вопросы