web-dev-qa-db-fra.com

Div positionné fixe dans un div parent relatif

Je construis actuellement un site Web réactif et j'ai besoin d'un menu pour être corrigé, donc pas de défilement lorsque le reste du site défile. le problème est qu'il s'agit d'une présentation fluide et que je souhaite que l'élément de menu "positionné de manière fixe" soit fixé par rapport à l'élément parent contenant et non à la fenêtre du navigateur. est-il possible que cela soit fait?

fixedcss
24
Gavin Wood

Cette question a été posée en premier sur Google, bien qu’elle soit ancienne. Je publie donc la réponse que j’ai trouvée, qui peut être utile à quelqu'un d'autre.

Cela nécessite 3 divs, y compris le div fixe.

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

Gavin, 

Le problème que vous rencontrez est un malentendu de positionnement. Si vous voulez qu'il soit "fixe" par rapport au parent, vous voulez vraiment que votre #fixed soit position:absolute, ce qui mettra à jour sa position par rapport au parent. 

Cette question décrit en détail les types de positionnement et leur utilisation efficace.

En résumé, votre CSS devrait être 

#wrap{ 
    position:relative;
}
#fixed{ 
    position:absolute;
    top:30px;
    left:40px;
}
14
Fuzzical Logic

Une solution simple, qui n'implique pas le recours à JavaScript et ne rompt pas les transformations CSS, consiste simplement à disposer d'un élément non défilant, de la même taille que votre élément défilant, positionné dessus par dessus.

La structure HTML de base serait

<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 serait le relatif div pour placer quelque chose de fixe par rapport à.
  • scrolling-contents aurait la taille de cette div et contiendrait son contenu principal
  • fixed-elements est simplement une div positionnée de manière absolue couvrant le même espace au-dessus de scrolling-contentsdiv.
  • en positionnant de manière absolue la variable div avec la classe fixed, elle produit le même effet que si elle était positionnée de manière fixe par rapport à la variable parent div. (ou le contenu de défilement, car ils couvrent tout cet espace)

Voici un js-fiddle avec un exemple de travail

7
KernelDeimos

Ceci est possible si vous déplacez le <div> fixe en utilisant des marges et non des positions:

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{ 
   position:fixed;
   width:10px;
   height:10px;
   background-color:#333;
   margin-left:200px;
   margin-top:200px;
}

Et ce HTML:

<div id="wrap">
   <div id="fixed"></div>
</div>

Jouez avec ce jsfiddle .

4
JCOC611

Une chose simple à faire est de positionner votre DIV fixe par rapport au reste de votre page avec les valeurs%.

Découvrez ceci jsfiddle ici où le DIV fixe est une barre latérale.

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

div#main {
    width: 60%;
}

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

Et une brève image ci-dessous décrivant la mise en page ci-dessus:

 example layout

2
afable

à propos de nous Nous contacter, nous avons besoin de plus de renseignements. jeho plně citlivé, Pure CSS fun, g na na na, Firefox, Chrome, Safari, Opéra. podporuje rolování obsahu bez ovlivnění menu/záhlaví.

À propos de moi Working Fiddle

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>

Služba 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;
}
1
avrahamcool

vous pouvez réparer le wrapper en utilisant le positionnement absolu .

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

et div à l'intérieur de cela 

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

essayez ceci Cela pourrait fonctionner pour vous

1
Mandar Kawtakwar

Essayez la position: collant sur l'élément parent.

1
Lohit Bisen

Solution échantillon. Vérifiez si c'est ce dont vous avez besoin. 

<div class="container">
   <div class="relative">      
      <div class="absolute"></div>      
      <div class="content">
        <p>
          Content here
        </p>
      </div>
    </div>
 </div>

Et pour CSS

.relative { 
  position: relative;
}

.absolute {
  position: absolute;
  top: 15px;
  left: 25px;   
}

Voir sur codepen https://codepen.io/FelySpring/pen/jXENXY

0
Fely Spring