2

嗨，我打算制作一个 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 将其放置在右上角在此处输入图像描述

4

5 回答 5

5

尝试这个，

.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 文件

于 2013-05-30T10:13:47.270 回答
5

用于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;;
}

演示

于 2013-05-30T10:12:51.970 回答
3

您必须对容器（相对、绝对或固定）使用非静态位置（默认为静态，然后在未指定位置时应用）；那么您必须将绝对位置应用于子元素。

使用left，top，right，bottom您可以设置子对象的起点（在您的情况下，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;
}
于 2013-05-30T10:18:35.510 回答
2

那里可能不需要 Z 索引，至少对于 .another 框来说是这样。

在 .inner 上设置填充时，内框永远不会完全位于右上角。

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

于 2013-05-30T10:13:44.883 回答
1

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

这应该这样做

于 2013-05-30T10:12:59.147 回答