Position fixed par rapport au body

13 mai 2018 à 11:58:11

Bonjour,

je suis en train de créer un site en utilisant reactjs.

J'ai besoin de plusieurs popup pour faire des ajouts d'éléments.

La première fonctionne très bien, j'ai un peu plus de mal avec la seconde qui est contenu dans une imbrication de div dont quelques une ayant une position relative

Comment faire pour positionner cette div en fixe par rapport au body ?

Voilà le code HTML

<body>
   <div id="root">
    <div id="main">
     <div class="content">
      <div id="slide">
       <div class="slick-list">
        <div class="uneslide">
          <div data-index="0" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: medium none currentcolor; width: 297px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease 0s, visibility 500ms ease 0s;">
            <div>
             <div class="slide">
               <div class="container">
                <div class="row title">
                  titre
                </div>
               </div>
               <div class="container">
                <div class="cards row">
                  <div class="info">
                    <h3>Quoi</h3>
                  <div class="container">
                   <div class="row">
                    <div class="col-2">img</div>
                    <div class="col-10">
                       <div>
                           <div>Info</div>
                           <div>Info</div>
                       </div>
                     </div>
                   </div>
                   <div class="row">
                    <div class="LEPOPUP">
                    <div>
                   </div>
             </div>
        </div>
       </div>
     </div>
     </div>
    </div>
   </div>
</body>

Merci pour votre aide

AliasDmc

13 mai 2018 à 13:28:40

Bonjour chihua;

Si je me trompe pas, utilises position : fixed;

Découvrez les Css avec la zonecss.fr

chihua

13 mai 2018 à 15:55:16

Hello,

justement, le .LEPOPUP est bien en position fixed, top 0, left 0, width:100%, height 100%

Cependant, il ne s'aligne pas en haut à gauche du body, mais de la première div parente ayant la position relative (.container)

Lamecarlate

13 mai 2018 à 15:59:08

Bonjour,

ce n'est pas le comportement habituel de position: fixed. La seule raison possible est que tu as un parent quelconque dans la cascade HTML qui a un transform, n'importe lequel. Cela crée un nouveau contexte de formatage, et force le fixed à se comporter comme un absolute. Oui, c'est chelou et surprenant, mais c'est "prévu", et documenté.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AliasDmc

13 mai 2018 à 16:06:09

Bonjour chihua,

Et tu peux pas sortir ton LEPOPUP pour le mettre en fils de body

Tu peux me faire un screen total (navigateur inclus).

Hum, position:fixed est relatif au haut de la fenêtre du coup si tu gères ta LEPOPUP en javascript il faut lui soustraire le scrolltop et scrollleft si je ne me trompe pas.

@Lamecarlate : pour moi fixed ne tient pas compte du contexte, je vais tester ?

Réponse après test : Je savais que transform créé un nouveau contexte de formatage mais que fixed en tenait compte .... bon à savoir

Je viens d'apprendre un truc, merci Lamecarlate.

-
Edité par AliasDmc 13 mai 2018 à 16:25:33

Découvrez les Css avec la zonecss.fr

chihua

13 mai 2018 à 16:10:27

Rah punaise, c'est bien ça.
J'étais pas au courant de ça, merci.

Malheureusement, je ne peux pas supprimer ce transform, comment puis-je faire ?

Lamecarlate

13 mai 2018 à 16:54:26

> Malheureusement, je ne peux pas supprimer ce transform, comment puis-je faire ?

Rien, hélas…

Tu ne peux pas le supprimer pour sûr ? Sur quoi est-ce appliqué, et pourquoi ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AliasDmc

13 mai 2018 à 16:59:38

Bonjour chihua,

Et tu peux pas sortir ton LEPOPUP pour le mettre en fils de body?

Découvrez les Css avec la zonecss.fr

chihua

13 mai 2018 à 17:25:44

Hello tout le monde,

je ne peux pas le sortir pour le mettre dans le body car je possède en fait plusieurs popup, un popup par élément.

En gros j'ai un slider (fait grâce à react-slick = slick js), à l'intérieur duquel j'ai plusieurs cartes, chaque cartes est divisées en sous partie et chacune de ses sous-parties contient un formulaire à afficher en popup...

edit:

Je n'arrive pas a supprimer le transform (généré par le slider), même en mettant un transform:none; etc il ne se réinitialise pas, alors que si je décoche tout dans l'inspecteur, l'affichage est bon...

-
Edité par chihua 13 mai 2018 à 17:28:37