一个div假定两个div

时间：2016-12-25 03:08:00

标签： html css css3 css-position

我需要将一个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>

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

enter image description here

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 2 :(得分：1)

将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/

相关问题
最新问题