HTML之绝对定位Absolute

最新推荐文章于 2025-05-12 10:53:06 发布

it_heros

最新推荐文章于 2025-05-12 10:53:06 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/sunshine_mood/article/details/50419134

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML中绝对定位的概念、应用及其在实际页面布局中的作用，并通过示例展示了如何使用绝对定位来实现复杂布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML之绝对定位

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <div style="width:500px;
            height:250px;
            border:1px solid Orange;
            position:relative;
            font-family:微软雅黑;
    ">韬睿科技研发部8部<p/><span style="font-family:楷体;">韬睿科技成立于2010年</span>
        <div style="width:0px;
                height:0px;             
                border-left:22px solid Transparent;
                border-right:22px solid #DCDCDC;
                border-top:22px solid #DCDCDC;
                border-bottom:22px solid Transparent;
                position:Absolute;
                top:0px;
                right:0px;  
        ">      
        </div><!--最外面的div是相对定位，其余子div是绝对定位-->
        <div style="width:0px;
                    heigth:0px;
                    border:0px solid red;
                    position:Absolute;
                    top:6px;
                    right:18px;
                    color:#000000;
            ">1     
            </div>
    </div>
 </body>
</html>

效果图：

这里写图片描述