position的 relative+absolute实现固定标签在窗口的某个位置
Posted Top丶赵立全
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position的 relative+absolute实现固定标签在窗口的某个位置相关的知识,希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative"> 10 <div style="background-color: black;width: 40px;height: 40px;position: absolute;right: 0;bottom: 0;color: white"> 11 <div style="line-height: 40px; text-align: center">哈哈</div> 12 </div> 13 14 15 </div> 16 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative"> 17 <div style="background-color: black;width: 40px;height: 40px;position: absolute;left: 0;top: 0;color: white"> 18 <div style="line-height: 40px; text-align: center">哈哈</div> 19 </div> 20 21 22 </div> 23 24 </body> 25 </html>
效果如下图
以上是关于position的 relative+absolute实现固定标签在窗口的某个位置的主要内容,如果未能解决你的问题,请参考以下文章