求个css样式，div浮在另一个div右上角

Posted 2023-05-03

我指的浮动是z-index＝100,飘在上面的

<style>
.main
width:200px;
height:300px;
border:1px solid green;


.float_div
position:absolute;
width:10px;
height:10px;
border:1px solid red;
float:right;
z-index:100;


</style>

<div class="main">
大量的内容...

<div class="float_div"></div>

</div>
发现小红框一直在左边，如何设到右上角去啊，底下字字正常显示，不是简单的float:right;

1、第二种方法：首先根据下方图片中的代码进行输入编辑。

2、然后根据下方图片中的代码进行输入编辑。

3、然后继续根据下方图片中的代码进行输入编辑。

4、第二种方法：如果想要靠右，可以先设置div2的宽度，在设置text-align即：.div2position:absolute;width:200px,text-align:right//widtn是设置和div1一样的宽度，效果图如下：

参考技术A 首先你应该先将所有浏览器的默认行为清除。。比如 *margin:0;padding:0;
然后给你的main设置为相对定位。。原因是为了让其内部的float_div的DIV相对main来绝对定位

.mainposition:relative;width:200px; height:300px;border:1px solid green;
再给你右上角的的div设置为绝对定位不用给其设置浮动了，因为设置为其设置为绝对定位已经脱离了文档标准流了。
.float_divposition:absolute;top:0;right:0;width:10px;height:10px;border:1px solid red;z-index:100;
这样设置之后就没啥问题了。楼主你试试。。 参考技术B .main
  width:200px;
  height:300px;
 border:1px solid green;
 position:relative;


.float_div
 position:absolute;
width:10px;
height:10px;
border:1px solid red;
right:0px;
top:0px;
z-index:100;

参考技术C .float_div
position:absolute;
width:10px;
height:10px;
border:1px solid red;
float:right;
z-index:100;
right:0;/* 定位到右上 */
top:0;
本回答被提问者采纳

一个div如何浮在另一个div之上？

一个div名为div1 ，另一个名为div2。假设div2浮在div1上，设置

.div1{position: relative;}

.div2{position: absolute;}

 

这时div2就会默认浮在div1的左上角，

如果想要靠右，可以先设置div2的宽度，在设置text-align即

.div2{position:absolute;width:200px,text-align:right}//widtn是设置和div1一样的宽度

 

如果想要div2浮在div1的下方，可以设置top属性，即

.div2{position:absolute;width:200px,text-align:right,top:100px:}

 

注意：长度宽度自己调整，图大小可能不太一致，就是表达一下位置关系
————————————————
版权声明：本文为CSDN博主「bmy_1234」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bmy_1234/article/details/81197114