ฉันจะจัดลำดับ div ใหม่โดยใช้ CSS เท่านั้นได้อย่างไร

ให้แม่แบบที่ HTML ไม่สามารถแก้ไขได้เนื่องจากข้อกำหนดอื่น ๆ มันเป็นไปได้อย่างไรที่จะแสดง (จัดเรียง) ใหม่divเหนือสิ่งอื่นdivเมื่อไม่ได้อยู่ในลำดับนั้นใน HTML? ทั้งสองdivประกอบด้วยข้อมูลที่แตกต่างกันในความสูงและความกว้าง

<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

หวังว่าจะเห็นได้ชัดว่าผลลัพธ์ที่ต้องการคือ:

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

เมื่อมิติได้รับการแก้ไขมันง่ายต่อการวางตำแหน่งพวกเขาในตำแหน่งที่ต้องการ แต่ฉันต้องการความคิดบางอย่างสำหรับเมื่อเนื้อหาเป็นตัวแปร เพื่อประโยชน์ของสถานการณ์นี้โปรดพิจารณาความกว้างเป็น 100% ทั้งคู่

ฉันกำลังมองหาโซลูชัน CSS-only โดยเฉพาะ (และอาจต้องพบกับโซลูชันอื่น ๆ หากไม่ได้เลื่อนออกไป)

มีองค์ประกอบอื่น ๆ ที่ติดตามสิ่งนี้ มีการกล่าวถึงข้อเสนอแนะที่ดีเนื่องจากสถานการณ์ที่ จำกัด ที่ฉันแสดงให้เห็นว่าอาจเป็นคำตอบที่ดีที่สุด แต่ฉันกำลังมองหาองค์ประกอบที่แน่ใจว่าสิ่งต่อไปนี้จะไม่ได้รับผลกระทบ

วิธีการแก้ปัญหานี้ใช้ CSS เท่านั้นและทำงานกับเนื้อหาตัวแปร

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

โซลูชัน CSS-only (ใช้ได้กับIE10 + ) - ใช้orderคุณสมบัติของ Flexbox :

การสาธิต: 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>

ข้อมูลเพิ่มเติม: https://developer.mozilla.org/en-US/docs/Web/CSS/order

อย่างที่คนอื่นพูดนี่ไม่ใช่สิ่งที่คุณต้องการทำใน CSS คุณสามารถทำให้เหลวไหลได้โดยการกำหนดตำแหน่งที่แน่นอนและระยะขอบที่แปลกประหลาด แต่มันไม่ใช่วิธีการแก้ปัญหาที่แข็งแกร่ง ตัวเลือกที่ดีที่สุดในกรณีของคุณคือหันไปใช้จาวาสคริปต์ ใน jQuery นี่เป็นงานง่าย ๆ :

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

หรือโดยทั่วไป:

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

สามารถทำได้โดยใช้ Flexbox

สร้างภาชนะที่ใช้ทั้งการแสดงผล: เฟล็กซ์และดิ้นไหล: คอลัมน์ย้อนกลับ

/* -- 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>

แหล่งที่มา:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

ไม่มีทางที่จะบรรลุสิ่งที่คุณต้องการผ่าน CSS เพียงอย่างเดียวในขณะที่สนับสนุนตัวแทนผู้ใช้ pre-flexbox ( ส่วนใหญ่เป็น IE เก่า ) - ยกเว้น :

1. คุณทราบความสูงที่แสดงผลที่แน่นอนของแต่ละองค์ประกอบ (ถ้าเป็นเช่นนั้น หากคุณจัดการกับเนื้อหาที่สร้างขึ้นแบบไดนามิกคุณไม่มีโชค
2. คุณรู้จำนวนที่แน่นอนขององค์ประกอบเหล่านี้จะมี อีกครั้งหากคุณต้องทำสิ่งนี้กับเนื้อหาที่สร้างขึ้นแบบไดนามิกคุณจะโชคไม่ดีโดยเฉพาะถ้ามีมากกว่าสามเรื่อง

ถ้าข้างต้นเป็นจริงจากนั้นคุณสามารถทำสิ่งที่คุณต้องการโดยการวางตำแหน่งองค์ประกอบ -

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

อีกครั้งถ้าคุณไม่ทราบว่าความสูงต้องการอย่างน้อย #firstDiv ไม่มีวิธีที่คุณสามารถทำสิ่งที่คุณต้องการผ่านทาง CSS เพียงอย่างเดียว หากเนื้อหาใด ๆ นี้เป็นแบบไดนามิกคุณจะต้องใช้จาวาสคริปต์

นี่คือทางออก:

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

แต่ฉันสงสัยว่าคุณมีเนื้อหาบางส่วนที่เป็นไปตาม div wrapper ...

ด้วย CSS3 flexbox layout module คุณสามารถสั่ง div ได้

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

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

หากคุณรู้หรือสามารถบังคับขนาดสำหรับองค์ประกอบที่เป็นบนคุณสามารถใช้

position : absolute;

ใน CSS ของคุณและให้ divs ตำแหน่งของพวกเขา

อย่างอื่นจาวาสคริปต์ดูเหมือนจะเป็นวิธีเดียวที่จะไป:

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

หรือสิ่งที่คล้ายกัน

แก้ไข: ฉันเพิ่งพบสิ่งนี้ซึ่งอาจมีประโยชน์: เอกสาร w3 css3 ย้ายไป

อัตรากำไรขั้นต้นติดลบสามารถบรรลุผลนี้ แต่พวกเขาจะต้องปรับแต่งสำหรับแต่ละหน้า ตัวอย่างเช่นมาร์กอัปนี้ ...

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

... และ CSS นี้ ...

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

... จะช่วยให้คุณสามารถดึงย่อหน้าที่สองด้านบนของวรรคแรก

แน่นอนว่าคุณจะต้องปรับแต่ง CSS ของคุณด้วยตนเองสำหรับความยาวคำอธิบายที่แตกต่างกันเพื่อให้ย่อหน้าแนะนำกระโดดขึ้นในจำนวนที่เหมาะสม แต่ถ้าคุณควบคุมส่วนอื่น ๆ อย่าง จำกัด และควบคุมมาร์คอัปและ CSS อย่างสมบูรณ์นี่อาจเป็นตัวเลือก .

ด้วยตำแหน่งเล็กน้อยแน่นอนและการตั้งค่าขอบหลบบางส่วนฉันสามารถเข้าใกล้ได้ แต่มันไม่สมบูรณ์หรือสวย:

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

"margin-top: 4em" เป็นบิตที่น่ารังเกียจโดยเฉพาะ: margin นี้จะต้องมีการปรับตามปริมาณของเนื้อหาใน firstDiv ขึ้นอยู่กับข้อกำหนดที่แน่นอนของคุณสิ่งนี้อาจเป็นไปได้ แต่ฉันหวังว่าจะมีใครบางคนสามารถสร้างสิ่งนี้เพื่อแก้ปัญหาที่มั่นคง

ความคิดเห็นของ Eric เกี่ยวกับ JavaScript น่าจะถูกติดตาม

สามารถทำได้ด้วย CSS เท่านั้น!

โปรดตรวจสอบคำตอบของคำถามที่คล้ายกันนี้:

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

ฉันไม่ต้องการโพสต์คำตอบของฉันซ้ำ แต่สิ่งที่ขาดไม่ได้คือผู้ปกครองต้องกลายเป็นองค์ประกอบ flexbox เช่น:

(ใช้เฉพาะคำนำหน้าผู้ขาย webkit ที่นี่)

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

จากนั้นสลับ divs ไปรอบ ๆ โดยระบุลำดับของพวกเขาด้วย:

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

ใน CSS ของคุณให้ลอย div แรกด้วยซ้ายหรือขวา ลอย div ที่สองโดยซ้ายหรือขวาเหมือนครั้งแรก ใช้clear: leftหรือrightเหมือนกับ Divs สองตัวด้านบนสำหรับ Div ที่สอง

ตัวอย่างเช่น:

#firstDiv {
    float: left;
}

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

หากคุณเพิ่งใช้ css คุณสามารถใช้ 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>

ฉันกำลังมองหาวิธีที่จะเปลี่ยนคำสั่งของ divs เฉพาะสำหรับรุ่นมือถือดังนั้นฉันจึงสามารถมีสไตล์ได้อย่างดี ขอบคุณที่ตอบกลับ nickf ฉันต้องทำให้ชิ้นส่วนของรหัสนี้ซึ่งทำงานได้ดีสำหรับสิ่งที่ฉันต้องการดังนั้นฉันแม้ว่าการแบ่งปันกับคุณ:

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

โซลูชันที่รองรับเบราว์เซอร์ที่ใหญ่กว่าจากนั้น flexbox (ทำงานใน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

ตรงกันข้ามกับdisplay: table;วิธีแก้ปัญหาวิธีนี้ใช้งาน.wrapperได้เมื่อมีจำนวนเด็ก ๆ

เพียงแค่ใช้ดิ้นสำหรับ div แม่โดยการระบุและdisplay: flex flex-direction : columnจากนั้นใช้ลำดับเพื่อพิจารณาว่า div ลูกใดมาก่อน

CSS ไม่ควรใช้เพื่อปรับโครงสร้างแบ็กเอนด์ HTML อย่างไรก็ตามเป็นไปได้หากคุณทราบถึงความสูงขององค์ประกอบทั้งสองที่เกี่ยวข้องและรู้สึกแฮ็ค นอกจากนี้การเลือกข้อความจะสับสนเมื่อไประหว่าง divs แต่นั่นเป็นเพราะลำดับ HTML และ CSS อยู่ตรงข้าม

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

ที่ XXX และ YYY เป็นความสูงของ firstDiv และ secondDiv ตามลำดับ สิ่งนี้จะใช้ได้กับองค์ประกอบต่อท้ายซึ่งต่างจากคำตอบยอดนิยม

ฉันมีรหัสที่ดีกว่ามากสร้างโดยฉันมันใหญ่มากเพียงแสดงทั้งสองสิ่ง ... สร้างตาราง 4x4 และจัดเรียงแนวตั้งมากกว่าเซลล์เดียว

ไม่ใช้แฮ็ค IE ใด ๆ ไม่มีแนวตั้ง: ตรงกลาง; เลย ...

มันไม่ได้ใช้สำหรับการแสดงผลกลางโต๊ะในแนวตั้ง, display: table-rom; แสดง: ตารางเซลล์

มันใช้เคล็ดลับของภาชนะที่มีสอง divs หนึ่งที่ซ่อนอยู่ (ตำแหน่งไม่ถูกต้อง แต่ทำให้ผู้ปกครองมีขนาดตัวแปรที่ถูกต้อง) หนึ่งมองเห็นได้หลังจากที่ซ่อนอยู่ แต่กับด้านบน: -50%; ดังนั้นจึงเป็นผู้เสนอญัตติที่จะแก้ไขตำแหน่ง

ดูคลาส div ที่สร้างเล่ห์เหลี่ยม: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

โปรดขอโทษที่ใช้ภาษาสเปนกับชื่อคลาส (เป็นเพราะฉันพูดภาษาสเปนและมันช่างหากว่าฉันใช้ภาษาอังกฤษฉันหลงทาง)

รหัสเต็ม:

<?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>

สายไปงานเลี้ยงเล็ก ๆ น้อย ๆ แต่คุณสามารถทำสิ่งนี้ได้:

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

หรือกำหนดตำแหน่งที่แน่นอนให้กับองค์ประกอบและกำหนดระยะขอบด้วยการประกาศจากขอบของหน้าแทนที่จะเป็นขอบของวัตถุ ใช้% ตามความเหมาะสมกับขนาดหน้าจออื่น ๆ และอื่น ๆ นี่คือวิธีที่ฉันเอาชนะปัญหา ... ขอบคุณหวังว่ามันคือสิ่งที่คุณกำลังมองหา ...

สำหรับโซลูชัน CSS เท่านั้น 1. ควรกำหนดความสูงของ wrapper หรือ 2 ความสูงของ div ที่สองควรได้รับการแก้ไข

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

มันง่ายด้วย css เพียงแค่ใช้display:blockและz-indexคุณสมบัติ

นี่คือตัวอย่าง:

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

แก้ไข: เป็นการดีที่จะตั้งค่าบางอย่างbackground-colorเป็นdiv-sเพื่อดูสิ่งต่าง ๆ อย่างเหมาะสม

ฉันมีวิธีง่ายๆในการทำเช่นนี้

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