HTML定位

1.固定定位,定位后不占原来页面位置,但存在覆盖现象

position: fixed;

2.相对定位,不脱离文档,根据上一个内容,占空间,便宜之后仍然占据页面中的空间,其余元素不可顶替、

position: relative;

3.绝对定位,不存在脱离文档流 不占空间
首先寻找父级 如果有父级(position:relative)根据父级进行定位 会找到最近的父级
如果没有(position:relative)根据浏览器进行定位
会和其他元素重合

position: absolute;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML定位是一种常用的网页布局方式,可以用来实现绝对定位、相对定位、固定定位等效果。具体实现步骤如下: 1. 使用CSS定义要定位的元素的样式,设置其position属性为absolute、relative或fixed; 2. 对于绝对定位或相对定位的元素,可以使用top、bottom、left、right属性来确定其在父元素中的位置; 3. 对于固定定位的元素,可以使用top、bottom、left、right属性来确定其在浏览器窗口中的位置; 4. 如果需要实现多个定位元素的层叠效果,可以使用z-index属性来设置它们的层级关系。 下面是一个简单的HTML定位的示例代码: ``` <!DOCTYPE html> <html> <head> <title>定位示例</title> <style> .container { position: relative; width: 400px; height: 400px; background-color: #eee; } .absolute { position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background-color: #ccc; } .relative { position: relative; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #ccc; } .fixed { position: fixed; top: 20px; right: 20px; width: 100px; height: 100px; background-color: #ccc; } .top { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background-color: #f00; z-index: 1; } .bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #0f0; z-index: 1; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: #00f; z-index: 2; } </style> </head> <body> <div class="container"> <div class="absolute"></div> <div class="relative"></div> <div class="fixed"></div> <div class="top"></div> <div class="bottom"></div> <div class="center"></div> </div> </body> </html> ``` 在上面的示例代码中,我们定义了一个容器元素,设置其position属性为relative,表示为相对定位。然后,我们在容器中定义了三个定位元素,分别是绝对定位的div元素、相对定位的div元素和固定定位的div元素,它们都设置了位置和大小以及背景颜色。此外,我们还在容器中定义了三个用于层叠的div元素,分别是顶部的div元素、底部的div元素和中心的div元素,它们都设置了位置和大小以及背景颜色,并使用z-index属性来设置层级关系。最后,我们将这些元素依次放在了body标签中,就实现了一个简单的HTML定位布局。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值