Comment puis-je réorganiser mes divs en utilisant uniquement CSS?


266

Étant donné un modèle où le HTML ne peut pas être modifié en raison d'autres exigences, comment est-il possible d'afficher (réorganiser) un divau - dessus d'un autre divalors qu'ils ne sont pas dans cet ordre dans le HTML? Les deux divs contiennent des données dont la hauteur et la largeur varient.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

J'espère qu'il est évident que le résultat souhaité est:

Content to be above in this situation
Content to be below in this situation
Other elements

Lorsque les dimensions sont fixes, il est facile de les positionner là où c'est nécessaire, mais j'ai besoin de quelques idées pour quand le contenu est variable. Pour ce scénario, veuillez simplement considérer la largeur à 100% sur les deux.

Je recherche spécifiquement une solution CSS uniquement (et elle devra probablement être rencontrée avec d'autres solutions si cela ne fonctionne pas).

Il y a d'autres éléments après cela. Une bonne suggestion a été mentionnée étant donné le scénario limité que j'ai démontré - étant donné que cela pourrait être la meilleure réponse, mais je cherche également à m'assurer que les éléments suivants ne sont pas affectés.

Réponses:


279

Cette solution utilise uniquement du CSS et fonctionne avec un contenu variable

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

3
Agréable! Ne fonctionne pas pour IE8 ou inférieur, mais vous pouvez utiliser un script conditionnel pour ces navigateurs ...
Stuart Wakefield

1
C'est vrai que ça ne marche pas pour IE7, mais je n'ai aucun problème avec IE8
Jordi

3
Oui, c'est très bien pour la réorganisation du contenu mobile, et la préoccupation d'IE est hors de la fenêtre! Pensez aux menus définis en premier et qui apparaissent à gauche pour les mises en page normales, mais vous voulez qu'ils apparaissent en bas sur des écrans mobiles étroits. Cela fait très bien l'affaire.
morphles

13
Il convient de noter que cela ne fonctionne pas avec les flotteurs. Vous devez définir le flotteur: aucun; si vous aviez déjà un flotteur.
Thomas

5
Remarque: img { max-width: 100% }ne fonctionnera pas à l'intérieur des éléments réorganisés.
Jonas Äppelgran

240

Une solution CSS uniquement (fonctionne pour IE10 + ) - utilisez Flexboxorder propriété :

Démo: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

Plus d'informations: https://developer.mozilla.org/en-US/docs/Web/CSS/order


1
La commande fonctionne ici. Mais les enfants n'obtiennent pas 100% de largeur. Au lieu de cela, ils partagent leurs espaces dans la même rangée. Une idée de la façon dont une largeur de 100% peut être utilisée pour chaque enfant avec cette méthode?
aniskhan001

8
#flex { display: flex; flex-direction: column; }affichera des rangées de 100% de largeur. jsfiddle.net/2fcj8s9e
Justin

Cela peut être fait en utilisant transformun support de navigateur plus large
Finesse

Non pris en charge sur l'iPhone 6 et les
versions antérieures

4
Cette solution vous permet de choisir n'importe quel ordre souhaité pour n'importe quel nombre de divisions. Cela devrait être la solution acceptée par l'OMI.
mareoraft

83

Comme d'autres l'ont dit, ce n'est pas quelque chose que vous voudriez faire en CSS. Vous pouvez le truquer avec un positionnement absolu et des marges étranges, mais ce n'est tout simplement pas une solution robuste. La meilleure option dans votre cas serait de vous tourner vers javascript. Dans jQuery, c'est une tâche très simple:

$('#secondDiv').insertBefore('#firstDiv');

ou plus génériquement:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

2
Parfois, il vaut mieux céder à ceux qui sont plus puissants. Dans ce cas, cela semble plus élégant et vous avez un vrai contrôle. Pour cette raison, je pense que c'est plus propre et meilleur.
atterri le

35

Cela peut être fait en utilisant Flexbox.

Créez un conteneur qui applique à la fois display: flex et flex-flow: column-reverse .

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}
<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

Sources:


25

Il n'y a absolument aucun moyen d'atteindre ce que vous voulez via CSS seul tout en prenant en charge les agents utilisateurs pré-flexbox ( principalement les anciens IE ) - à moins que :

  1. Vous connaissez la hauteur de rendu exacte de chaque élément (si c'est le cas, vous pouvez absolument positionner le contenu). Si vous avez affaire à du contenu généré dynamiquement, vous n'avez pas de chance.
  2. Vous connaissez le nombre exact de ces éléments. Encore une fois, si vous devez le faire pour plusieurs morceaux de contenu générés dynamiquement, vous n'avez pas de chance, surtout s'il y en a plus de trois ou plus.

Si ce qui précède est vrai, vous pouvez faire ce que vous voulez en positionnant absolument les éléments -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

Encore une fois, si vous ne connaissez pas la hauteur souhaitée pour au moins #firstDiv, il n'y a aucun moyen de faire ce que vous voulez via CSS seul. Si l'un de ces contenus est dynamique, vous devrez utiliser javascript.


D'accord, j'ai rétrogradé cela aussi, d'abord, mais je suis revenu. Un peu de raffinement est cependant dû aux conditions: vous n'avez pas besoin de connaître le nombre exact d'éléments à réorganiser, sauf si ce nombre est> 3 (voir la réponse gagnante de la prime ). Ceci est particulièrement pertinent pour OP qui voulait spécifiquement échanger seulement 2 éléments.
Sz.

16

Voici une solution:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

Mais je soupçonne que vous avez du contenu qui suit la div wrapper ...


Oui ... essayant de ne pas être trop verbeux avec la situation, mais il y a d'autres éléments qui suivent. Bonne suggestion, étant donné le HTML limité fourni - pourrait fonctionner pour quelqu'un d'autre.
devmode

7

Avec le module de mise en page CSS3 flexbox, vous pouvez commander des divs.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

5

Si vous connaissez ou pouvez appliquer la taille de l'élément à être supérieur, vous pouvez utiliser

position : absolute;

Dans votre css et donnez aux divs leur position.

sinon javascript semble la seule solution:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

ou quelque chose de similaire.

edit: Je viens de trouver ce qui pourrait être utile: w3 document css3 move-to


5

Les marges supérieures négatives peuvent produire cet effet, mais elles devraient être personnalisées pour chaque page. Par exemple, ce balisage ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... et ce CSS ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... vous permettrait de tirer le deuxième paragraphe au-dessus du premier.

Bien sûr, vous devrez modifier manuellement votre CSS pour différentes longueurs de description afin que le paragraphe d'introduction augmente la quantité appropriée, mais si vous avez un contrôle limité sur les autres parties et un contrôle total sur le balisage et le CSS, cela pourrait être une option .


4

Eh bien, avec un peu de positionnement absolu et un réglage de marge douteux, je peux me rapprocher, mais ce n'est pas parfait ou joli:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

Le "margin-top: 4em" est le bit particulièrement méchant: cette marge doit être ajustée en fonction de la quantité de contenu dans le premierDiv. En fonction de vos besoins exacts, cela pourrait être possible, mais j'espère quand même que quelqu'un pourra s'appuyer sur cela pour une solution solide.

Le commentaire d'Eric sur JavaScript devrait probablement être poursuivi.


3

Cela ne peut être fait qu'avec CSS!

Veuillez vérifier ma réponse à cette question similaire:

https://stackoverflow.com/a/25462829/1077230

Je ne veux pas poster deux fois ma réponse, mais le plus court est que le parent doit devenir un élément flexbox. Par exemple:

(en utilisant uniquement le préfixe du fournisseur de webkit ici.)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Ensuite, permutez les divisions en indiquant leur ordre avec:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

3

Dans votre CSS, faites flotter le premier div à gauche ou à droite. Faites flotter le deuxième div à gauche ou à droite comme le premier. Appliquer clear: leftouright les mêmes que les deux div ci-dessus pour le deuxième div.

Par exemple:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

<div class = "container"> <div id = "secondDiv"> <p> ... </p> </div> <div id = "firstDiv"> <p> ... </p> </ div> </div>
Vestel

Sur mon étui flotteur: à droite; clair: gauche; fonctionne parfaitement
user956584

utiliser clear est un excellent moyen, mais notez que vous devez faire flotter votre élément dans la bonne direction et que vous devez également faire flotter tous les autres éléments pour faire correctement. Vestel, vous devriez utiliser certains styles comme celui-ci: <style> #secondDiv, #firstDiv {float: left; } #firstDiv {clear: left; } </style> <div class = "container"> conteneur <div id = "secondDiv"> <p> secondDiv </p> </div> <div id = "firstDiv"> <p> firstDiv </p> </div> </div>
Reza Amya

3

Si vous utilisez simplement css, vous pouvez utiliser flex.

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}
<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>


2

Je cherchais un moyen de modifier les ordres des divs uniquement pour la version mobile, alors je peux le styler bien. Grâce à la réponse de Nickf, j'ai pu créer ce morceau de code qui fonctionnait bien pour ce que je voulais, alors j'ai pensé à le partager avec vous:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

1

Une solution avec un support de navigateur plus grand que la flexbox (fonctionne dans IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

Contrairement à la display: table;solution, cette solution fonctionne quand .wrappera une quantité d'enfants.


Et si le div contient une image>?
Ramji Seetharaman

0

Utilisez simplement flex pour le parent div en spécifiant display: flexet flex-direction : column. Ensuite, utilisez l'ordre pour déterminer lequel des enfants div vient en premier


2
Pourquoi pensez-vous que cette réponse à la vieille question de 7 ans est meilleure que celles déjà publiées? Si vous souhaitez participer à SO, veuillez trouver des questions sans (bonnes) réponses et essayez de les répondre d'une manière qui sera utile à tous les visiteurs.
Marki555

-1

CSS ne devrait vraiment pas être utilisé pour restructurer le backend HTML. Cependant, cela est possible si vous connaissez la hauteur des deux éléments impliqués et que vous vous sentez hackish. De plus, la sélection de texte sera gâchée lors du passage entre les divs, mais c'est parce que l'ordre HTML et CSS sont opposés.

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

Où XXX et YYY sont respectivement les hauteurs de firstDiv et secondDiv. Cela fonctionnera avec les éléments de fin, contrairement à la réponse du haut.


Alors, que devrait "être utilisé pour restructurer le HTML" quand, disons, mettre le contenu avant la navigation pour un lecteur d'écran?
Damian Yerrick

-1

J'ai un bien meilleur code, fait par moi, il est si gros, juste pour montrer les deux choses ... créer un tableau 4x4 et aligner verticalement plus d'une cellule.

Il n'utilise aucun hack IE, pas d'alignement vertical: middle; du tout...

Il n'utilise pas pour le centrage vertical display-table, display: table-rom; affichage: table-cellule;

Il utilise l'astuce d'un conteneur qui a deux divs, un caché (la position n'est pas correcte mais fait que le parent a la bonne taille variable), un visible juste après le caché mais avec top: -50%; il est donc nécessaire de corriger la position.

Voir les classes div qui font l'affaire: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Veuillez m'excuser d'utiliser l'espagnol sur les noms de cours (c'est parce que je parle espagnol et c'est tellement délicat que si j'utilise l'anglais je me perds).

Le code complet:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

-1

Un peu tard pour la fête, mais vous pouvez aussi le faire:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>


-2

Ou définissez une position absolue pour l'élément et travaillez hors des marges en les déclarant à partir du bord de la page plutôt que du bord de l'objet. Utilisez% comme son plus approprié pour les autres tailles d'écran ect. C'est ainsi que j'ai surmonté le problème ... Merci, j'espère que c'est ce que vous cherchez ...


-3

Pour la solution CSS uniquement 1. La hauteur du wrapper doit être fixe ou la hauteur du deuxième div doit être fixe


Cela ne fait rien pour répondre à la question posée. Ce n'est rien de plus qu'un commentaire faisant allusion à une solution possible.
cimmanon

-3
.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

2
Cette solution a déjà été publiée 3 ans avant la vôtre: stackoverflow.com/a/12069537/1652962
cimmanon

-4

C'est facile avec css, il suffit d'utiliser display:blocket de z-indexpropriété

Voici un exemple:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Edit: Il est bon de mettre un peu background-colorà div-svoir les choses correctement.


-4

J'ai un moyen simple de le faire.

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}

Votre solution pourrait bien résoudre le problème - mais pouvez-vous expliquer pourquoi / comment cela se produit. Il y a des tas de nouveaux débutants sur S / O et ils pourraient apprendre quelque chose de votre expertise. Ce qui peut être une solution évidente pour vous ne l'est peut-être pas pour eux.
Taryn East

Les blocs de code seuls ne sont généralement pas des réponses utiles et sont plus susceptibles d'attirer des votes négatifs. Veuillez expliquer en quoi consiste la solution que vous montrez et pourquoi / comment ce code répond à la question.
j_s_stack
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.