2016-06-14 8 views
1

私はCSSとブートストラップを学び、いくつかのテストを行っています。 白いテキストdivの上部に画像オーバーレイの半分を反応的に作成しようとしましたが、失敗しました。 divは常に画像の下にあった。 div z-indexを200に設定すると、divの色は背景色と同じになります。私に何ができる? おかげイメージオーバーレイを反応的な方法で作成する

.bodyClass { 
 
    background: #ffbc00 
 
} 
 
.container { 
 
    background: #fff 
 
} 
 
.img-overlap { 
 
    margin-left: 150px; 
 
    z-index: 500 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Service</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  rel="stylesheet"/> 
 
    <link rel="stylesheet" type="text/css" href="styles/myStyle.css"> 
 
</head> 
 
<body class="bodyClass"> 
 
    <p style="padding:50px 0px 0px 0"></p> 
 
    <img src="1.jpg" class="img-responsive img-circle img-overlap"> 
 
    <div class="container"> 
 
    Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world 
 
    </div> 
 
</body> 
 
</html>

enter image description here
+0

マイナスの「margin-top」 – theblindprophet

答えて

0
z-index 

位置は絶対的または相対的である場合にのみ動作します。

0

position: absolute;img-overlapクラスに追加するだけです。 z-index: 10;と設定します。

.bodyClass { 
 
\t background: #ffbc00 
 
} 
 
.container { 
 
\t background: #fff 
 
} 
 
.img-overlap { 
 
    margin-left: 200px; 
 
\t z-index: 10; 
 
    position: absolute; 
 
    margin-top: -200px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Service</title> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  rel="stylesheet"/> 
 
\t <link rel="stylesheet" type="text/css" href="styles/myStyle.css"> 
 
</head> 
 
<body class="bodyClass"> 
 
\t <p style="padding:50px 0px 0px 0"></p> 
 
\t \t <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRsSlzi6GEickw2Ft62IdJTfXWsDFrOIbwXhzddXXt4FvsbNGhp" class="img-responsive img-circle img-overlap"> 
 
\t <div class="container"> 
 
\t \t Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world 
 
\t </div> 
 
</body> 
 
</html>

0

)(私はあなたのターゲットブラウザ(s)が何であるか、またはあなたが持っている他のどのような制限が分かりませんが、絶対位置& CALCで、このようにそれを行うことができます。実際には、イメージをテキストの中央に置くことに気をつけなければ、calc()も必要ありません。

.container { 
 
    position: relative; 
 
    margin: 50px 0 0 25px; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    height: 200px; 
 
    top: calc(50% - 100px); 
 
    left: calc(50% - 100px); 
 
}
<div class='container'> 
 
    <p> 
 
    Arrived compass prepare an on as. Reasonable particular on my it in sympathize. Size now easy eat hand how. Unwilling he departure elsewhere dejection at. Heart large seems may purse means few blind. Exquisite newspaper attending on certainty oh suspicion 
 
    of. He less do quit evil is. Add matter family active mutual put wishes happen. 
 
    </p> 
 
    <p> 
 
    Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did 
 
    disposing you household any instantly. Hills we do under times at first short an. 
 
    </p> 
 
    <p> 
 
    Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant 
 
    has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. 
 
    </p> 
 
    <p> 
 
    Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. 
 
    Eagerness get situation his was delighted. 
 
    </p> 
 
    <p> 
 
    Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense as taken ye mirth at. Believe 
 
    fat how six drawing pursuit minutes far. Same do seen head am part it dear open to. Whatever may scarcely judgment had. 
 
    </p> 
 

 
    <img src="http://makemomentum.com/wp-content/uploads/2013/04/puking-rainbow-square.jpg" /> 
 

 
</div>

真CSSの忍者は、おそらくより良い方法を持っていますが、私の理解から、あなたは絶対位置のようなもので、通常のドキュメントフローからそれを取得する必要がありますか、あなたが試みることができます負のマージンを使用する

関連する問題