绝对定位-CSS入门基础(025)

今天我们接着分享关于定位布局的内容。

 

绝对定位absolute:

 

当元素的position属性值为absolute时,这个元素就变成了绝对定位的元素,这种方法能够精确地把元素移动到你想要的位置。

 

一个元素变成了绝对定位元素后,就脱离了正常的文档流。

 

语法:

 

 

position:absolute;top:像素值;bottom:像素值;left:像素值;right:像素值;

 

 

“position:absolute”,是结合top、bottom、left和right这4个属性一起使用的。

 

示例代码:

​​​​​​​

<html>  <head>    <title>绝对定位</title>    <style type="text/css">      #father {        padding:15px;        background-color:#0c6a9d;        border:1px solid silver;      }      #father div {        padding:10px;        background-color:#fcd568;        border:1px dashed red;      }      #box2 {        position:absolute;        top:0;        right:0;      }    </style>  </head>  <body>    <div id="father">      <div id="box1">box1</div>      <div id="box2">box2</div>      <div id="box3">box3</div>    </div>  </body></html>

 

预览效果,你会发现box2在页面的右上角,它脱离了文档流。独立存在。

 

静态定位static:

 

如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的HTML对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。

 

一般情况下,不会用到“position:static”,只有在使用JavaScript控制元素定位时才会用到此属性的。

 

 

 

结束语:

 

以上的章节就是我给大家分享的关于CSS的入门基础内容了,希望大家多加练习,在之后的分享中,我们需要学习JavaScript的一些内容。有了HTML,CSS,JavaScript的基础后,我们就可以去学习数据库的使用,然后我们就开始学习PHP。

 

 


 

 

 

图片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持,我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值