Я пытаюсь создать элемент с relative с overflow:hidden, который содержит несколько элементов fixed -позиции. Цель состоит в том, чтобы дочерние элементы fixed стали скрытыми по мере перемещения родительского элемента, например, если они были частью background-image с attachment:fixed на родительском элементе.Относительный родитель с переполнением: скрытый, фиксированный ребенок не подчиняется

По всем учетным записям в StackOverflow и в других местах в Интернете это невозможно, поскольку фиксированный элемент относится только к окну браузера и игнорирует его родительский элемент. Однако, по какой причине она на самом деле работает, как предполагалось в Chrome только: http://jsfiddle.net/x6avvhuf/

Вот что скрипка выглядит, его просмотра в Chrome против IE/Firefox, чтобы увидеть разницу:

HTML

<body> 
<div id = "headwrapper"> 
    I am the relative parent element 
    <div class = "fixedchild"> 
     I am a fixed child element 
    </div> 
</div> 
<div id = "content"> 
    This is the main content portion of the page<br> 
    <!-- Repeat until the page scrolls --> 
    This is the main content portion of the page<br> 
</div>

CSS

body { 
    background-color: yellow; 
} 

#headwrapper { 
    position: relative; 
    height: 300px; 
    width: 100%; 
    overflow: hidden; 
    z-index: -1; 
    background-color: black; 
    color: white; 
    text-align: center; 
} 

.fixedchild { 
    position: fixed; 
    width: 75%; 
    height: 40px; 
    z-index: 48; 
    top: 22.5%; 
    left: 50%; 
    margin: 0 0 0 -37.5%; 
    text-align: center; 
    color: red; 
    background-color: pink; 
}

Какое альтернативное решение для этого? Я прочел, что элемент absolute ведет себя как элемент fixed с CSS, но до сих пор мне не удалось выполнить эту работу. Заранее благодарим за любую помощь или совет! :)

источник

2015-01-12 fishang

Я ищу вашу скрипку. С Chrome или Firefox у меня такой же неправильный результат. Вы уверены, что он работает в Chrome? – Bellu

Да, и он работает над фактическим сайтом, который я строю. Однако только в Chrome. – fishang

Остается видимым. – Bellu

UPDATE

Иногда лучшие решения являются самыми простыми. Учитывая код, который вы размещены все, что вы должны сделать, это установить background-color на #content (например: yellow в данном случае в соответствии с body), так как ваш фиксированный элемент имеет z-index: -1 и будет сидеть за ним в любом случае:

#content{ 
    background: yellow; 
    width: 100%; 
}

CSS EXAMPLE 1

ИЛИ

вы можете установить #content на position:relative, который позволит вам заказать это и ваш фиксированный DIV с(это, вероятно, лучше, используя z-index: -1 вроде хака):

CSS

.fixedchild { 
    position: fixed; 
    width: 75%; 
    height: 40px; 
    z-index: 1; //set to 1 
    top: 22.5%; 
    left: 50%; 
    margin: 0 0 0 -37.5%; 
    text-align: center; 
    color: red; 
    background-color: pink; 
} 

#content{ 
    background: yellow; 
    width: 100%; 
    position: relative; //add 
    z-index: 2; //set higher 
}

CSS EXAMPLE 2

(предыдущий ответ):

DISCLAMIER: Это не CSS-решение.

Для этого может быть решение CSS.Я не знаю, случается, один с верхней части моей головы, но я знаю, что это может быть сделано довольно легко с Jquery

$(window).scroll(function(){ 
    var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed 
    $(".fixedchild").css({"top": scrolled+"px"}); 
});

CSS

.fixedchild { 
    position: absolute; 
    width: 75%; 
    height: 40px; 
    z-index: 48; 
    top: 100px; 
    left: 50%; 
    margin: 0 0 0 -37.5%; 
    text-align: center; 
    color: red; 
    background-color: pink; 
}

JS EXAMPLE

источник

2015-01-12 19:31:55 jmore009

Спасибо, если я не смогу найти решение для CSS, я буду ссылаться на это :) – fishang

Я просто попытался сделать что-то по-настоящему быстро и ничего не нашел. Я не слышал об этом, и я бы сказал, что я очень уверен, что это невозможно с помощью CSS, но вы каждый день узнаете что-то новое. – jmore009

@fishang Я скоро поговорил, разобрался в другом решении. Обновлен мой ответ – jmore009

Относительный родитель с переполнением: скрытый, фиксированный ребенок не подчиняется

ответ

ИЛИ

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