Исправлено позиционирование div в относительном родительском div - PullRequest
Новая
       27

Исправлено позиционирование div в относительном родительском div

25 голосов
/ 21 октября 2011

В настоящее время я создаю адаптивный веб-сайт, и мне нужно исправить меню, чтобы при прокрутке остальной части сайта не было прокрутки. проблема в том, что это гибкий макет, и я хочу, чтобы пункт меню «фиксированное положение» был зафиксирован относительно содержащего родительского элемента, а не окна браузера. в любом случае это можно сделать?

Ответы [ 9 ]

15 голосов
/ 15 октября 2014

Этот вопрос был первым в Google, хотя и старый, поэтому я публикую найденный рабочий ответ, который может пригодиться кому-то еще.

Для этого требуется 3 деления, включая фиксированное деление.

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; }
14 голосов
/ 23 октября 2011

Гэвин,

Проблема, с которой вы столкнулись, заключается в неправильном понимании позиционирования. Если вы хотите, чтобы он был «фиксирован» по отношению к родителю, то вы действительно хотите, чтобы ваш #fixed был position:absolute, который обновит свою позицию относительно родителя.

Этот вопрос полностью описывает типы позиционирования и способы их эффективного использования.

В итоге ваш CSS должен быть 

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
7 голосов
/ 30 мая 2015

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

Базовая структура HTML будет иметь вид

CSS 

<style>
    .parent-to-position-by {
        position: relative;
        top: 40px; /* just to show it's 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 &quot;fixed positioned&quot;
        </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.(или прокручиваемое содержимое, поскольку оно занимает весь этот пробел)

Вот js-скрипка с рабочим примером

4 голосов
/ 21 октября 2011

Это возможно, если вы перемещаете фиксированный <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 .

2 голосов
/ 30 июня 2017

Попробуйте postion: закреплено на родительском элементе.

2 голосов
/ 06 ноября 2015

Простая вещь, которую вы можете сделать, это расположить фиксированный DIV относительно остальной части вашей страницы с% значениями.

Проверьте это jsfiddle здесь , где фиксированный DIV является боковой панелью.

div#wrapper {
    margin: auto;
    width: 80%;
}

div#main {
    width: 60%;
}

div#sidebar {
    position: fixed;
    width: 30%;
    left: 60%;
}

И краткое изображение ниже с описанием макета выше:

example layout

1 голос
/ 15 января 2016

вы можете исправить обертку, используя абсолютное позиционирование.и дайте внутри div фиксированную позицию. 

.wrapper{
 position:absolute;
 left:10%;// or some valve in px
 top:10%; // or some valve in px
 }

и разделите внутри него 

.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;
}

попробуйте это может работать для вас

1 голос
/ 29 сентября 2013

вот более общее решение, которое не зависит от высоты меню / заголовка. Его полностью адаптивное решение Pure CSS отлично работает на IE8 +, Firefox, Chrome, Safari, Opera. поддерживает прокрутку содержимого без влияния на меню / заголовок.

Проверьте это с этим Рабочая скрипка

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;
}
0 голосов
/ 10 декабря 2018

Пример решения. Проверьте, если это то, что вам нужно. 

<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;   
}

Посмотреть на коде https://codepen.io/FelySpring/pen/jXENXY

...