Как Видимого Div За изображением

*{ 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 
    
 
    .container{ 
 
    \t height: 638px; 
 
    \t width: 100%; 
 
    \t max-width: 100%; 
 
    \t position: absolute; 
 
    \t overflow: hidden; 
 
    \t background-position: center; 
 
    \t top: 0; 
 
    \t z-index: -1; 
 
    } 
 
    
 
    .container img{ 
 
    \t width: 100%; 
 
    \t height: 638px; 
 
    } 
 
    
 
    .container #short-des{ 
 
    \t background: rgba(0,0,0,.5); 
 
    \t height: 400px; 
 
    \t width: 500px; 
 
    \t position: relative; 
 
    }

 \t <div class="container"> 
 
    \t <img src="cover.jpg"> 
 
    \t <div id="short-des"> 
 
    \t 
 
    </div> 
 
    </div>

я хочу короткий дез дела до виден над изображением в центре я попытался г-индекс, но он не работает. пожалуйста, помогите мне исправить это по причине, поэтому я буду принимать это в будущем

источник

2016-10-13 Rabner Casandara

Поместите свой div в положение absolute, чтобы наложить на ваше изображение. Используйте свойства left/top/right/bottom, чтобы установить его положение.

Это положение будет относительно ближайшего Нестатические (абсолютное/относительное/фиксированный) позиционируемый элемент или <body>

#short-des, 
 
#short-des2 { 
 
    position: absolute; 
 
    left: 90px; 
 
    top: 50px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: rgba(100, 250, 100, .6); 
 
    z-index: 7; 
 
} 
 

 
#short-des2 { 
 
    z-index: 8; 
 
    left: 100px; 
 
    top: 55px; 
 
    background-color: rgba(250, 100, 100, .7); 
 
} 
 
.wrapper { 
 
    margin: 50px; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
 
    <div id="short-des"></div> 
 
    <div id="short-des2"></div> 
 
    </div>

источник

2016-10-13 06:11:57 Justinas

Try это ...

Просто установите position : absolute затем установите местоположение с помощью top и left CSSproperties.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    height: 638px; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background-position: center; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 
.container img { 
 
    width: 100%; 
 
    height: 638px; 
 
} 
 
.container div#short-des { 
 
    background: rgba(0, 0, 0, .5); 
 
    height: 40px; 
 
    width: 50px; 
 
    top:40%; 
 
    left:50%; 
 
    position: absolute; 
 
    z-index:999; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
    <div id="short-des"> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-10-13 06:13:00 Sankar

Вы можете добавить изображение в качестве фона контейнера DIV [.container] как

.container{ 
     background: url('path/to/image'); // eg. 'cover.jpg' 
     background-repeat: no-repeat; 
     background-size: 100% 100%; 
     height: 638px; 
     width: 100%; 
     max-width: 100%; 
     position: absolute; 
     overflow: hidden; 
     background-position: center; 
     top: 0; 
     z-index: -1; 
    }

и удалить <img> из HTML

<div class="container"> 
     <div id="short-des"></div> 
    </div>

источник

2016-10-13 06:17:27 sheetal

Это подходит, и это поможет даже в адаптивном дизайне. –

.container{ 
    height: 638px; 
    width: 100%; 
    max-width: 100%; 
    position: absolute; 
    overflow: hidden; 
    background-position: center; 
    top: 0; 
    z-index: -1; 
} 
.box { 
    position: relative; 
    width: 638px; 
    height: 300px; 
} 
.box img{ 
    width: 100%; 
    height: 500px; 
} 

.box #short-des{ 
    background: rgba(0,0,0,.5); 
    height: 400px; 
    width: 500px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -250px; 
}

<div class="container"> 
    <div class="box"> 

    <div id="short-des"> 

    </div> 
    <img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG"> 
    <div id="short-des"> 
    </div> 
    </div> 

</div>

http://codepen.io/rizwanmughal/pen/KgZQRx

источник

2016-10-13 07:09:38

Как Видимого Div За изображением

ответ

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