在不使用 position:absolute 的情况下将 div 放置在另一个 div 的右上角

Question

我希望将一个DIV放置在另一个DIV的右上角（蓝色区域内）。我使用了position:absolute进行演示，但是解决方案不能对“tag” DIV使用position:absolute，因为我使用Masonry，这会将position:absolute添加到我的网格项中，当我使用它时，在加载或重新加载页面时布局会在几秒钟内混乱。是否可能实现我的目标？再次强调，我不能为.tag实施position:absolute。

Fiddle: Fiddle HTML:

<div class="article">
    <article class="box">
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="tag">MY TAG HERE</div>
                <div class="title">BIG Headline</div>
                <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

CSS：

.tag {
    top: 0px;
    right: 0px;
    min-height: 0px;
}

.tag {
    font-size:14px;
    font-family:'Droid Serif';
    text-align:center;
    color:#FFF;
    margin-left:15px;
    padding:6px;
    background-color:red;
    float:right;
    z-index:3;
    display:block;
    position:absolute;
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}

- user4752928

---

@RedBeast - 尝试过了，没用。边距确实是个问题，所以我宁可不这样做。 - user4752928

如果主容器的高度和宽度是静态的，那么你可以使用上边距和右边距 :) - Sachink

但是解决方案不能对“tag” DIV使用position:absolute，因为我使用Masonry，这会将position:absolute添加到我的网格项中。为什么这会阻止您使用position: absolute？这毫无意义。正如我在您之前的问题中提到的，您需要给“.tag”的祖先元素设置“position:relative;”...示例：http://jsfiddle.net/hf1db9go/12/ - 这不会对Masonry产生负面影响。 - Turnip

@性感萝卜 - 谢谢，你为我解决了这个问题。 - user4752928

这里有一个示例，仅供参考... http://jsfiddle.net/hf1db9go/13/ - Turnip

Answer 1

请检查一下这段代码，它是可用的。 在这里查看演示 - http://jsfiddle.net/hf1db9go/10/

HTML

<div class="article">
    <article class="box">
        <div class="tag">MY TAG HERE</div>
       
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
           
            <div class="title">BIG Headline</div>
            <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

CSS

.masonry_item_inner{
     position:relative;
     float:left;
     left:30px;
}
 .tag {
     top: 0px;
     right: 0px;
     min-height: 0px;
}
 .tag {
     font-size:14px;
     font-family:'Droid Serif';
     text-align:center;
     color:#FFF;
     margin-left:15px;
     padding:6px;
     background-color:red;
     float:right;
     z-index:3;
     display:block;
     position:relative;
}
 .box {
     width: 400px;
     background-color:blue;
     display:inline-block;
     position:absolute;
}
 .title {
     color:green;
     background-color:white;
     font-size:40px;
     font-weight:bold;
}

- Maheshvirus

Answer 2

查看 fiddle。

我将.tag放在.masonry_item_inner之前，并编辑了.box {padding: 0px 0px 40px 40px;}的底部和左侧填充，还给.masonry_item_inner {padding: 40px 40px 0px 0px;}添加了顶部和右侧的填充。

- Ahmed

Answer 3

使用margin时，您可以将其固定。

Fiddle

.tag {
    top: 0px;
    right: 0px;
    min-height: 0px;
}

.tag {
    font-size:14px;
    font-family:'Droid Serif';
    text-align:center;
    color:#FFF;
    margin-left:15px;
    padding:6px;
    background-color:red;
    float:right;
    z-index:3;
    display:block;
    margin-top: -194px;
    margin-right: -40px;
  /*  position:absolute; */
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}

<div class="article">
    <article class="box">
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="tag">MY TAG HERE</div>
                <div class="title">BIG Headline</div>
                <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

只有当 .box 的高度和宽度固定时，这才能正常工作。

- Sachink

---

很遗憾，我没有盒子的固定高度和宽度。 - user4752928