Question

我需要将一个div（3.element）放在另一个div标签上。

#header {
  width: 100%;
  height: 150px;
  background-color: rgb(181, 230, 29);
}
#footer {
  width: 100%;
  height: 150px;
  background-color: rgb(153, 217, 234);
}
#mid {
  width: 150px;
  height: 250px;
  background-color: rgb(200, 191, 231);
  margin-left: auto;
  margin-right: auto;
}

<div id="header"></div>
<div id="mid"></div>
<div id="footer"></div>

这就是我想要的......

Answer 1

将#mid放入标题内并对其应用position:absolute;，然后使用transform:translate(-50%,50%);（分别适用于左下角）以下是代码：

#header{
	width: 100%;
	height: 150px;
	background-color: rgb(181,230,29);
  position:relative;
}
#footer{
	width: 100%;
	height: 150px;
	background-color: rgb(153,217,234);
}
#mid{
	width: 150px;
	height: 200px;
  position:absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
	background-color: rgb(200,191,231);
  z-index:100;
}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="header">
  <div id="mid"></div></div>
			
	<div id="footer"></div>

</body>
</html>

Answer 2

＆＃13;

#header{
	width: 100%;
	height: 150px;
	background-color: rgb(181,230,29);
}
#footer{
	width: 100%;
	height: 150px;
	background-color: rgb(153,217,234);
}
#mid{
	width: 150px;
	height: 250px;
	background-color: rgb(200,191,231);
	margin-left: auto;
	margin-right: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="header"></div>
			<div id="mid"></div>
	<div id="footer"></div>

</body>
</html>

＆＃13;

Answer 3

将CSS中的#mid更改为：

#mid{
    position: relative;
    top: -125px;
    left: calc(50% - 75px); // center it by changing the negative value to half the width
    float: left; // this is what allows it to not "disturb" other elements
    width: 150px;
    height: 250px;
    background-color: rgb(200, 191, 231);
}

https://jsfiddle.net/brgbg33m/2/

一个div假定两个div

3 个答案: