div悬浮在固定位置_HTML定位——绝对定位和相对定位、固定定位

最新推荐文章于 2023-12-06 18:09:22 发布

weixin_39804335

最新推荐文章于 2023-12-06 18:09:22 发布

阅读量3.3k

点赞数

文章标签： div悬浮在固定位置 html 定位 html 滚动条 html定位 html导航栏 html弹出悬浮窗口

本文详细介绍了HTML中的定位技术，包括绝对定位、相对定位和固定定位。绝对定位使元素根据最近已定位的祖先元素或整个网页进行定位；相对定位则是以元素自身起点为参照，移动后仍占据原有空间；固定定位则始终相对于浏览器窗口定位，不会因滚动条移动。这些定位方式在网页布局和交互设计中有着广泛应用。

摘要由CSDN通过智能技术生成

1、绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。

position：absolute；

<!DOCTYPE html> 
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位和布局</title>
</head>
<style>
    .big {
        width: 900px;
        height: 600px;
        background-color: black;
        position: relative;
    }

    .box4 {
        width: 150px;
        height: 100px;
        background-color: blue;
         position: absolute;
        top: 150px;
        left: 200px; 
    }
</style>
<body>
    <div class="big">

最低0.47元/天解锁文章

weixin_39804335

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div悬浮在固定位置_HTML定位——绝对定位和相对定位、固定定位

1、绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。position：absolute；<!DOCTYPE html> <html lang="en"><head&...
复制链接

扫一扫