Поместите изображение позади div, расположенного по направлению к верхнему центру - PullRequest
Новая
       0

Поместите изображение позади div, расположенного по направлению к верхнему центру

2 голосов
/ 28 марта 2020

В течение некоторого времени я пытался выяснить, как поместить изображение позади div, центрированного в верхней части div. Изображение, которое будет размещено за div, будет SVG-изображением, которое в будущем я хочу оживить. В настоящее время в коде, который я предоставил, есть элемент div размером 400 x 400, и сейчас у меня есть изображение заполнителя, которое сейчас плавает слева от элемента div. Я ищу, может ли кто-нибудь помочь мне и решить мою проблему.

Я предоставил изображение ожидаемого результата, который я ищу!

Спасибо всем заранее!

Изображение предполагаемого результата 

body {
	background-color: #f6b93b;
	height: 100%;
	overflow: hidden;
}

#contentContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#productCard {
	height: 400px;
	width: 400px;
	background-color: #FFF;
	border-radius: 25px;
}
<html>

<head>
    <title>Snippet</title>
</head>

<body>
    <div id="contentContainer">
        <div id="imageContainer">
            <img src="https://via.placeholder.com/100">
        </div>
        <div id="productCard">
        </div>
    </div>
</body>

</html>

Ответы [ 2 ]

2 голосов
/ 28 марта 2020

Вы были почти там: 

#contentContainer {
    margin-top: 60px;
    position: relative;
}

#imageContainer {
    position: absolute;
    top: -50px;
}


body {
	background-color: #f6b93b;
	height: 100%;
	overflow: hidden;
}

#contentContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
  margin-top: 60px;
  position: relative;
}

#imageContainer {
    position: absolute;
    top: -50px;
}

#productCard {
	height: 400px;
	width: 400px;
	background-color: #FFF;
	border-radius: 25px;
}
<html>

<head>
    <title>Snippet</title>
</head>

<body>
    <div id="contentContainer">
        <div id="imageContainer">
            <img src="https://via.placeholder.com/100">
        </div>
        <div id="productCard">
        </div>
    </div>
</body>

</html>
0 голосов
/ 28 марта 2020

Добавьте z-index к вашему изображению, например, 

#productCard {
    height: 400px;
    width: 400px;
    background-color: #FFF;
    border-radius: 25px;
    z-index: 1
}

поместит карту поверх всего, что имеет меньший z-индекс (по умолчанию у всех z-индекс равен 0),

Вы также можете сделать z-index: -1 et c ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...