如何让div定位在另一个div的顶部角落？

Z时代
2024-01-10
分类：问答

你好我计划做一个div在另一个div的右上角放置如何让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来放置在顶部right corner

回答：

必须使用非静态位置（静态是默认的，然后应用没有指定位置时）在容器（相对,绝对或固定）;那么您必须将绝对位置应用于子元素。

使用离开，顶部，右，底部可以设置子对象的出发点（在你的情况，右和顶部），并最终高度和宽度。

请注意，绝对 *位置*，该元素将从流删除，它不会被认为是在页面一致的对象了;这意味着容器内容将在其下流动，如果子元素不存在。

演示：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; 
}

回答：

使用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

回答：

把你的CSS Top:*the pixels you want, can also be in minus"-"*;和Right:*the pixels you want, can also be in minus"-"*

这应该这样做

回答：

Z-指数法可能没有必要存在，至少在。另外一个盒子。

内框永远无法将填充设置在.inner内。

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

回答：

试试这个，

.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; 
}