如何在另一个特定DIV中将DIV设置为绝对？

时间：2016-06-12 01:51:10

标签： html css

我有3个DIV包裹在容器内。我不得不将它们包装在容器中，以便按照我想要的方式将它们放在我的页面上。在这3个DIVS中，DIV标题为每个DIV制作标题栏。标题栏DIV标题定位为绝对标题，因此它们会扩展到它们所在的DIV顶部。这样可以正常工作。但是当我将3 DIVS放入容器中时，标题DIV成为容器的子项并开始扩展它而不是它们各自的DIV。有没有办法让他们回去？

JSFIDDLE：https://jsfiddle.net/mh2ez7x9/2/

＆＃13;
＆＃13; 
.main {
  border: 2px solid red;
  position: relative;
  width: 740px;
  right: 0;
  left: 0;
  top: 220px;
  margin: 0 auto;
}
.update {
  position: none;
  display: inline-block;
  background-color: #474747;
  width: 700px;
  height: 200px;
  padding: 20px;
  padding-top: 50px;
  border: 1px solid black;
  border-radius: 5px;
  left: 280px;
  top: 220px;
  color: white;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  z-index: 1;
}
.newmembers {
  position: none;
  display: inline-block;
  margin-top: 10px;
  background-color: #474747;
  width: 350px;
  height: 200px;
  padding: 20px;
  padding-top: 50px;
  border: 1px solid black;
  border-radius: 5px;
  left: 280px;
  top: 500px;
  color: white;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  z-index: 1;
}
.latest {
  position: none;
  display: inline-block;
  margin-top: 10px;
  background-color: #474747;
  width: 300px;
  height: 200px;
  padding: 20px;
  padding-top: 50px;
  border: 1px solid black;
  border-radius: 5px;
  left: 680px;
  top: 500px;
  color: white;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  z-index: 1;
}
.miniheaderA {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  border: 2px none red;
  padding: 5px;
  height: 20px;
  background-image: url('../images/redboxtext.png');
  box-shadow: 0px 2px 5px #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.miniheaderM {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  border: 2px none red;
  padding: 5px;
  height: 20px;
  background-image: url('../images/orangeboxtext.png');
  box-shadow: 0px 2px 5px #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.miniheaderU {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  border: 2px none red;
  padding: 5px;
  height: 20px;
  background-image: url('../images/blueboxtext.png');
  box-shadow: 0px 2px 5px #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
＆＃13; 
<div class="main">

  <div class="update">
    <div class="miniheaderU">
      <h3>News</h3>
    </div>
    Welcome to the all new website!
  </div>


  <td valign="top">
    <div class="newmembers">
      <div class="miniheaderM">
        <h3>New Members</h3>
      </div>
      <?php echo "new members!"; ?>
    </div>

    <div class="latest">
      <div class="miniheaderA">
        <h3>Latest Content</h3>
      </div>
      <?php echo "new content"; ?>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

我认为其他人误解了你的目标。随意看看我的代码：

http://codepen.io/anon/pen/MeyYWV?editors=1100

我为你做了一些重组规则，为了方便我添加了一个课程：

.update, .newmembers, .latest{
  padding:0 0 1em;
  position:relative;
  float:left;
  margin: 10px 20px;
  display: inline-block;
  background-color: #474747;
  border: 1px solid black;
  border-radius: 5px;
  color: white;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  z-index: 1;
}
.update {
  width: 700px;
  height: 200px;
}

.newmembers {
  width: 350px;
  height: 200px;
}
.latest {
  width: 300px;
  height: 200px;
}

Mohamed Athif在H3上是正确的，所以我加入了他的规则。

答案 1 :(得分：0)

您的代码存在一些问题，例如没有position:none，您在类中复制了很多代码，并且HTML标记中丢失了td，我将其简化了，无需使用position:absolute

使用box-sizing: border-box，您可以正确执行width次计算，而无需担心padding / border

我更改width值以使其响应。

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.main {
  max-width: 740px;
  margin: 0 auto;
  font-size:0 /* fix inline-block gap*/
}
.miniheader {
  box-shadow: 0px 2px 5px #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 2px none red;
  padding: 5px;
}
h3 {
  margin: 0
}
.A {
  background-color: deeppink;
  background-image: url('../images/redboxtext.png');
}
.M {
  background-color: orange;
  background-image: url('../images/orangeboxtext.png');
}
.U {
  background-color: skyblue;
  background-image: url('../images/blueboxtext.png');
}
.main > div {
  display: inline-block;
  background-color: #474747;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 12pt;
  text-shadow: 0px 0px 0 #000026, 0px 1px 0 #000026, 0px -1px 0 #000026, 1px 0px 0 #000026, 1px 1px 0 #000026, 1px -1px 0 #000026, -1px 0px 0 #000026, -1px 1px 0 #000026, -1px -1px 0 #000026, 0px 0px 0px #000026;
  font-family: 'Muli', sans-serif;
  box-shadow: 5px 5px 10px #000000;
  color: white;
  height: 200px;
  font-size:16px;
}
.update {
  width: 100%;
}
.newmembers, .latest {
  margin-top: 10px;
  width: 50%; 
}
<div class="main">
  <div class="update">
    <div class="miniheader U">
      <h3>News</h3>
    </div>
    Welcome to the all new website!
  </div>
  <div class="newmembers">
    <div class="miniheader M">
      <h3>New Members</h3>
    </div>
    <?php echo "new members!"; ?>
  </div>
  <div class="latest">
    <div class="miniheader A">
      <h3>Latest Content</h3>
    </div>
    <?php echo "new content"; ?>
  </div>
</div>

答案 2 :(得分：0)

在类miniheaderU，miniheaderM和miniheaderA上使用position：relative。在H3标签和css中插入类使用margin-top：0px。

这样你的HTML代码就是

<div class="main">

  <div class="update">
    <div class="miniheaderU">
      <h3 class="gj">News</h3>
    </div>
    Welcome to the all new website!
  </div>


  <td valign="top">
    <div class="newmembers">
      <div class="miniheaderM">
        <h3 class="gj">New Members</h3>
      </div>
      <?php 
    echo "new members!";
    ?>
    </div>

    <div class="latest">
      <div class="miniheaderA">
        <h3 class="gj">Latest Content</h3>
      </div>
      <?php 
    echo "new content";
    ?>
    </div>

</div>

并在代码

下面插入css 
H3.gj {
  margin-top: 0px;
}
相关问题
最新问题