Divs перекрывающего друг по другу

Я создал эту страницу, и я хотел бы видеть #showcase, содержащим #banner на вершине, а ДИВО #main, состоящий из таблицы, чтобы быть ниже, просто прикоснувшись знамени не идти вниз по #banner.Divs перекрывающего друг по другу

Fiddle

CSS:

#bcontainer{display:block; 
position:absolute; 
width:100%; 
} 
#showcase{ 
margin-top: 0; 
position:absolute; 
float:left; 
clear:both; 
height:200px; 
width:100%; 
valign:middle; 
} 
.image { 
position: relative; 
width:100%; 
height:100%; 
z-index:-4; 
} 
#bannerText { 
position: absolute; 
top: 50px; 
float:right; 
width:100%; 
color:cyan; 
} 
#Text{ 
float:right; 
margin-right:20px; 
font-size:20px;} 

#banner{ 
height:100%; 
width:100%; 
} 
#main{ 
width:100%; 
clear:both; 
display:block; 
position:relative; 
valign:middle; 

} 
.fb-follow{ 
float:right;} 
footer{ 
display:inline-block; 
background:#141823; 
}

HTML:

<body><div id="bcontainer"> 
<div id="showcase"><div class="image"><img id="banner" alt="" 

src="file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg"> 
    <div id="bannerText"><span id="Text">Singing Sensation of Doon :Shashwat `J Pandit</span></div> 
</div> 
    </div> 
    <div id="main" > 
      <table> 
      <thead><tr><th colspan="2">My Youtube Videos<th><tr></thead> 
      <tbody> 
       <tr><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=I4mfvaazBxQ"> 

</iframe></td><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=qjTgYgFDDFM"> 
</iframe></td></tr> 
        <tr><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=tEMy0L5_a-Y"> 
</iframe></td><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=6mNoiI_7pE4"> 
</iframe></td></tr> 
        <tr><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=9l_kRa4fwPY"> 
</iframe></td><td><iframe width="420" height="315" 
src="https://www.youtube.com/watch?v=7qtNr3DqVqE"> 
</iframe></td></tr> 
       </tbody> 
      </table>     
    </div> 
    </body>

источник

2015-03-21 Rajan Chauhan

вы хотите какой?! –

в основном ваша проблема возникает из-за чрезмерного использования свойств позиционирования, когда на самом деле у вас есть очень мало нужно для него, так рефакторинг вашего html/css необходим для css:

#showcase { 
    height:200px; 
    width:100%; 
    background: url("file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg"); 
} 
#Text { 
    margin-top: 50px; 
    text-align:right; 
    margin-right:20px; 
    font-size:20px; 
    color: cyan; 
} 
#main { 
    width: 900px; 
    margin: 0 auto; 
} 
.fb-follow { 
    float:right; 
} 
footer { 
    display:inline-block; 
    background:#141823; 
}

В вашем HTML, вы можете заменить все перед вашим столом со следующим кодом, как вы видите, что это более лаконично, чем оригинал:

<div id="showcase"> 
    <h1 id="Text"> 
     Singing Sensation of Doon : Shashwat J Pandit 
    </h1> 
</div>

Вот это обновленного fiddle

Что касается таблицы, вам использование для демонстрации видео с использованием CSS columns было бы более чистым подходом.

источник

2015-03-22 00:33:13

Divs перекрывающего друг по другу

ответ

Смежные вопросы