CSSの位置相対/絶対がレイアウトを妨害しています

Question

次のファイルをチェックアウトしてください HTMLの構造とCSSはほぼ同じです。私は自分のプロジェクトで使用しています。 は現在、私は、私は、ブートストラップ3の最新バージョンを使用しています私のデザイン HEADER ポートフォリオ スライダー厄介セクション

に3つのセクションがあります。

私はポートフォリオセクションに相対的なポジションを与え、その内側のブロックは絶対をtopと置きます：-50px;

こちらのすべては問題ありません。しかし、私は新しいセクション "スライダ"を追加するときに問題が発生します。それはポートフォリオセクションに来ています。私はそれに位置と異なるブロックプロパティを与えることを試みた。まだスライダーセクションはポートフォリオセクションに来ています。ポートフォリオセクション からポジションを削除すると、スライダセクションが元の位置に戻ります。 誰でも次のようなフィドルをチェックして、私が間違っていることを教えてください。 デザインはポートフォリオのセクションがヘッダーを少し上回るようなものです。だからこそ私はポジションを使用しています。

<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script> 
https://jsfiddle.net/DTcHh/29616/ 

Answer 1

私はむしろ位置：絶対を使用したいと思いますが、流れを壊すので不要です。要素を上に移動するには、マージンを相対または負の位置にするだけで済みます。私はそれが役に立てば幸い私の更新をチェックしてください例にhttps://jsfiddle.net/DTcHh/29623/

<header class="container-fluid header"> 
    <div class="row"> 
    <h1>HEADER</h1> 
    </div> 
</header> 
<section class="container"> 
    <div class="row position-relative"> 
    <div class="col-sm-10 col-sm-offset-1 position-relative-col"> 
     <div class="height"> 
     <h2>Some Portfolio items here</h2> 
     </div> 
    </div> 
    </div> 
</section> 
<section class="container trouble"> 
    <div class="row"> 
    <h3>Slider Troubling section</h3> 
    </div> 
</section> 

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
.header { 
    background: lightblue; 
    padding:25px; 
} 
.position-relative { 
    position:relative; 
} 
.position-relative-col { 
    background: green; 
    position: relative; 
    top: -50px; 
} 
.trouble { 
    background: darkblue; 
    opacity: 0.8; 
    color: white; 
} 
.height { 
    height: 100px; 
} 

Answer 2

tryをcontainer class heightプロパティに追加してみてください。それはうまくいくはずです：

.container{ 
    height: 100px; 
} 

Answer 3

を参照してください。私が何をしたか

http://jsfiddle.net/DTcHh/29626/

position:relativeとtop: -50px;

Answer 4

を使用すると、あなたは間違ったブートストラップ3グリッドを使用していることを同じタグの中にスライダーやポートフォリオを入れています。各行に対してrowクラスを追加し、rowクラスの各アイテムに対してクラスcol-*-*を使用する必要があります。私はあなたのコードに基づいてブートストラップグリッドを適切に使用していくつかの新しいコードを書いています。

http://jsfiddle.net/DTcHh/29627/

これが良くない場合は私に知らせてください、とあなたが代わりに達成しようとします。