Сделать изображение наложением div в ответном порядке

Я изучаю css и bootstrap и делаю некоторые тесты. Надеюсь сделать половину наложения изображения на вершине белого текстового div и в ответном порядке, но не удалось. Div всегда находился под изображением. Если я установил div z-index на 200, тогда цвет div станет таким же, как цвет фона. Что я могу сделать? БлагодаряСделать изображение наложением 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>

источник

2016-06-14 Wayne Li

Попробуйте отрицательный 'margin-top' – theblindprophet

z-index

работает только тогда, когда позиция является абсолютным или относительным.

источник

2016-06-14 02:09:07 SESN

Просто добавьте 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>

источник

2016-06-14 02:11:48 claudios

Я не знаю, что ваш целевой браузер (ы), или какие другие ограничения у вас есть, но вы можете сделать это, как это с абсолютным позиционированием & известково(). Фактически, если вам не нужно центрировать изображение на текст, вам даже не нужен 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 ниндзя, вероятно, есть лучший способ, но из моего понимания вам необходимо либо получить его из нормального потока документа с чем-то, как абсолютное позиционирование, или вы могли бы попробовать используя отрицательный запас

источник

2016-06-14 02:51:44 Stoney

Сделать изображение наложением div в ответном порядке

ответ

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