Div高于绝对div

时间：2017-12-19 19:12:57

标签： html css

这是一个小提琴链接

.authorTag {
  float: right;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.DateTag {
  float: right;
  position: relative;
  right: 0px;
  top: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.tag {
  float: left;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.DivTitle {
  float: left;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}

.contentContainer {
  position: relative;
  width: 300px;
  height: 300px;
  /* top:0;
    left:0;*/
  border: 1px solid black;
  margin: 5px;
}
<div class="contentContainer">
  <div class="tag">Featured</div>
  <div class="authorTag">authorTag</div>
  <div class="DateTag">Time</div>
  <img src="https://dummyimage.com/100/000000/fff" width="100%">
  <div class="DivTitle"> Title </div>
</div>

Fiddle Link

场景 一个容器div 图像填充容器div（如果它是容器div的背景则没有问题） 标题div位于容器的底部 剩余空间的每个角落都有四个div 注意：标题div带有动态文本，这意味着它可能是一行或多行

所需输出的图像 enter image description here

3 个答案:

答案 0 :(得分：1)

希望以下代码有所帮助。我使用background-size: cover;将图像作为背景图像。我还将标签分成顶部和底部，并使用左右浮动来定位标签。

＆＃13;
＆＃13; 
.contentContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 5px;
  background: url('https://dummyimage.com/100/000000/fff') no-repeat center center;
  background-size: cover;
}

.topTags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.bottomTags {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.tag {
  width: auto;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  box-sizing: border-box;
}

.left {
  float: left;
}

.right {
  float: right;
}

.divTitle {
  width: 100%;
  clear: both;
}
＆＃13; 
<div class="contentContainer">
  <div class="topTags">
    <div class="tag left">Featured</div>
    <div class="tag right">authorTag</div>
  </div>
  <div class="bottomTags">
    <div class="tag left">Time</div>
    <div class="tag right">Bottom Left</div>
    <div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

解决方案2，图像为<img>

＆＃13;
＆＃13; 
.contentContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 5px;
}

.bgImage {
  position: absolute;
  width: 100%;
  height: 100%;
}

.topTags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.bottomTags {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.tag {
  width: auto;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  box-sizing: border-box;
}

.left {
  float: left;
}

.right {
  float: right;
}

.divTitle {
  width: 100%;
  clear: both;
}
＆＃13; 
<div class="contentContainer">
  <div class="topTags">
    <div class="tag left">Featured</div>
    <div class="tag right">authorTag</div>
  </div>
  <img class="bgImage" src="https://dummyimage.com/100/000000/fff" />
  <div class="bottomTags">
    <div class="tag left">Time</div>
    <div class="tag right">Bottom Left</div>
    <div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你走了。您的问题是图像应该是设置为容器div的背景图像。然后你需要添加一个背景大小＆＃34; cover＆＃34;让它适合。接下来你有一些搞砸的CSS。你的＆＃34; Divtitle＆＃34; class有一个填充集，所以它强制它超出界限。如果你想要填充顶部或左边或底部使用＆＃34; padding-left＆＃34;，＆＃34; padding-right＆＃34;等。我还添加了一个额外的容器div，它具有一定的高度和宽度，以便＆＃34; contentContainer＆＃34;可以将图像设置为100％的宽度和高度，但也不要拧紧任何东西。

以下是纠正错误：https://jsfiddle.net/32vg2466/1/

HTML：

<div style="width: 250px; height: 250px;">
    <div class="contentContainer" >
        <div class="tag">Featured</div>
        <div class="authorTag">authorTag</div>
        <div  class="DateTag">Time</div>
        <div class="DivTitle"> Title </div>
    </div>
</div>

CSS：

.authorTag
{
   float: right;
   position: absolute;
   right: 0px;
   top: 0px;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   cursor:pointer;
}
.DateTag
{
   float: right;
   position: relative;
   right: 0px;
   top: 0px;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   cursor:pointer;
}
.tag {
   float: left;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   cursor:pointer;
}
.DivTitle {
   float: left;
   position: absolute;
   left: 0px;
   bottom: 0px;
   z-index: 1000;
   background-color: #92AD40;

   color: #FFFFFF;
   font-weight: bold;
   cursor:pointer;
    width: 100%;
}
.contentContainer{
    position:relative;
    width:100%;
    height:100%;
   /* top:0;
    left:0;*/
    border:1px solid black;
    margin:5px;
    **background-image: url("https://dummyimage.com/100/000000/fff");
    background-position: center;
    background-size: cover;**
}

答案 2 :(得分：0)

这是另一种解决方案。通过将底部标签放在标题栏中，我们可以将它们相对于它放置。

.background {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}

.topLeft {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.topRight {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.bottomLeft {
  position: absolute;
  bottom: 100%;
  left: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.bottomRight {
  position: absolute;
  bottom: 100%;
  right: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
}

.bottomBar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1000;
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  cursor: pointer;
  /* Remove padding left and right from width*/
  width: calc(100% - 10px);
}

.contentContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 5px;
}
<div class="contentContainer">
  <img class="background" src="https://dummyimage.com/100/000000/fff" width="100%">
  <div class="tag topLeft">Featured</div>
  <div class="authorTag topRight">authorTag</div>
  <div class="bottomBar">
    <div class="otherTag bottomLeft">Other</div>
    <div class="dateTag bottomRight">Time</div>
    <div class="divTitle">Title - this can be any amount of text, bottom tags will move up.</div>
  </div>
</div>

相关问题
最新问题