Question

嗨我打算将div放在另一个div的右上角

.another
{
   position:fixed;
   padding:09px;
   margin:auto;
   left:25%;
   width:auto;
   height:auto;
   background:#ffffff;
   z-index:999999;
}
.topcorner
{
   float:right;
   position:fixed;
   left:25%;
   z-index:99999999;
}

这是我的HTML

<div class="another">
    <div class="topcorner">
        i am at top right corner
    </div>
    here is some other content
</div>

如何将 topcorner div放在右上角 enter image description here

Answer 1

将position:relative用于父div，将absolute用于子div

.another{
    position:relative;
    border:blue solid 1px;
    height:200px;
    background:#ffffff;
}
.topcorner{
    background:red;
    width:30px;
    height:30px;
    position:absolute;
    top;0;
    right:0;;
}

<强> DEMO

Answer 2

试试这个，

.another
{
    position:relative;
    padding:09px;
    margin:auto;
    width:auto;
    height:200px;
    background:#eee;
    z-index:999999;
}
.topcorner
{
    position:absolute;
    top:0;
    right:0;
    z-index:99999999;
    width:100px;
    height:auto;
    background:yellow;
}

jsFiddle File

Answer 3

您必须使用非静态位置（静态是默认值，然后在未指定位置时应用）到容器（ relative ，绝对或已修复）;那么你必须将绝对位置应用于子元素。

使用 left ， top ， right ， bottom ，您可以设置子对象的起点（在您的case， right 和 top ），最终是高度和宽度。

请注意，使用绝对 *位置*时，该元素将从流中删除，并且它将不再被识别为页面中的一致对象;这意味着如果子元素不存在，容器内容将在其下流动。

演示：http://jsfiddle.net/pBS68/

CSS代码：

.another {
    padding:9px;
    margin:0 auto;
    width:50%;
    height:200px;
    border: 1px solid silver;
    position: relative;
}

.topcorner {    
    position:absolute;
    right: 0;
    top: 0;
    width: 100px;        
    border: 1px solid red;
}

Answer 4

在那里可能不需要Z-Indexs，至少对于另一个盒子来说。

内框不会在填充设置为.inner的情况下正确地向右上方。

尝试删除填充，看看是否能找到你想要的东西。将Z-Indexes更改为合理的内容，例如0表示.inner，10表示另一个表框。

Answer 5

放入您的css Top:*the pixels you want, can also be in minus"-"*;和Right:*the pixels you want, can also be in minus"-"*

这应该这样做

如何使div位于另一个div的顶角？

5 个答案: