В настоящее время я создаю отзывчивый веб-сайт и нуждаюсь в фиксированном меню, поэтому не прокручиваюсь, когда прокручивается остальная часть сайта. проблема в том, что это жидкий макет, и я хочу, чтобы элемент меню с фиксированным позиционированием фиксировался относительно содержащего родительского элемента, а не в окне браузера. все равно это можно сделать?
Фиксированный позиционный div в относительном родительском div
Ответ 1
Этот вопрос был первым в Google, хотя старый, поэтому я отправляю рабочий ответ, который я нашел, который может быть полезен кому-то другому.
Для этого требуется 3 divs, включая фиксированный div.
HTML
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.wrapper { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }
Ответ 2
Гэвин,
Проблема, с которой вы сталкиваетесь, - непонимание позиционирования. Если вы хотите, чтобы он был "исправлен" относительно родителя, вы действительно хотите, чтобы ваш #fixed
был position:absolute
, который обновит свою позицию относительно родителя.
Этот вопрос полностью описывает типы позиционирования и способы их эффективного использования.
Итак, ваш CSS должен быть
#wrap{
position:relative;
}
#fixed{
position:absolute;
top:30px;
left:40px;
}
Ответ 3
Простое решение, которое не включает в себя использование JavaScript и не нарушает CSS-преобразования, состоит в том, чтобы просто иметь элемент без прокрутки того же размера, что и ваш элемент прокрутки, расположенный над ним в абсолютном положении.
Основная структура HTML будет
CSS
<style>
.parent-to-position-by {
position: relative;
top: 40px; /* just to show it relative positioned */
}
.scrolling-contents {
display: inline-block;
width: 100%;
height: 200px;
line-height: 20px;
white-space: nowrap;
background-color: #CCC;
overflow: scroll;
}
.fixed-elements {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.fixed {
position: absolute; /* effectively fixed */
top: 20px;
left: 20px;
background-color: #F00;
width: 200px;
height: 20px;
}
</style>
HTML
<div class="parent-to-position-by">
<div class="fixed-elements">
<div class="fixed">
I am "fixed positioned"
</div>
</div>
<div class="scrolling-contents">
Lots of contents which may be scrolled.
</div>
</div>
-
parent-to-position-by
будет относительнымdiv
к позиции, фиксированной относительно. -
scrolling-contents
будет охватывать размер этогоdiv
и содержать его основное содержимое -
fixed-elements
просто абсолютное расположениемdiv
охватывает то же пространство над верхней частьюscrolling-contents
div
. - путем абсолютного позиционирования
div
сfixed
классом, он достигает того же эффекта, как если бы он был с фиксированным позиционированием относительно родительскогоdiv
. (или прокручиваемое содержимое, так как оно занимает все пространство)
Ответ 4
Это возможно, если вы переместите фиксированный <div>
с использованием полей, а не позиций:
#wrap{ position:absolute;left:100px;top:100px; }
#fixed{
position:fixed;
width:10px;
height:10px;
background-color:#333;
margin-left:200px;
margin-top:200px;
}
И этот HTML:
<div id="wrap">
<div id="fixed"></div>
</div>
Играйте с этим jsfiddle.
Ответ 5
Простая вещь, которую вы можете сделать, - позиционировать свой фиксированный DIV по отношению к остальной части вашей страницы со значениями%.
Посмотрите jsfiddle здесь, где фиксированный DIV является боковой панелью.
div#wrapper {
margin: auto;
width: 80%;
}
div#main {
width: 60%;
}
div#sidebar {
position: fixed;
width: 30%;
left: 60%;
}
И краткое изображение ниже, описывающее макет выше:
Ответ 6
Попробуйте постинг: липкий на родительском элементе.
Ответ 7
вот более общее решение, которое не зависит от высоты меню/заголовка. его полностью отзывчивое, чистое решение для CSS, отлично работает на IE8 +, Firefox, Chrome, Safari, opera. поддерживает прокрутку содержимого, не затрагивая Menu/Header.
Протестируйте его с помощью Рабочий скрипт
Html:
<div class="Container">
<div class="First">
<p>The First div height is not fixed</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
</div>
<div class="Second">
<div class="Wrapper">
<div class="Centered">
<p>The Second div should always span the available Container space.</p>
<p>This content is vertically Centered.</p>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
/*This part his relevant only for Vertically centering*/
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Wrapper:before
{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
Ответ 8
вы можете исправить оболочку, используя абсолютное позиционирование. и дать внутри div фиксированное положение.
.wrapper{
position:absolute;
left:10%;// or some valve in px
top:10%; // or some valve in px
}
и div внутри,
.wrapper .fixed-element{
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}
попробуйте это. Это может сработать для вас.
Ответ 9
Образец решения. Проверьте, если это то, что вам нужно.
<div class="container">
<div class="relative">
<div class="absolute"></div>
<div class="content">
<p>
Content here
</p>
</div>
</div>
</div>
И для CSS
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 15px;
left: 25px;
}
Смотрите это на codepen https://codepen.io/FelySpring/pen/jXENXY