css - 滚动元素内的absolute

现象

scroll 内元素 absolute 定位异常

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动元素内的absolute</title>
</head>
<style>
    .box{
        --size:200px;
        width: var(--size);
        height: var(--size);
        overflow-y: auto;
        border: 1px solid #00aaee;
    }
    .scroll-box{
        width: 100%;
        height: 500px;
    }
    .absolute{
        position: absolute;
        --size:50px;
        bottom: 0;
        right: 0;
        width: var(--size);
        height: var(--size);
        background-color: yellow ;
    }
</style>
<body>
    <div class="box">
        <div class="scroll-box">
            <div class="absolute"></div>
        </div>
    </div>
</body>
</html>

absolute 元素是再 html 外的是相对于window的

期望效果

无论scroll-box如何滚动，absolute 始终向对于 box 定位

absolute 描述

w3school

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

解决

.box relative 未解决

位置相对于box但会随scroll-box移动

结论：position 无法脱离dom层级

dom 结构

改变dom层级

 <style>
    .box{
        position: relative;
        --size:200px;
        width: var(--size);
        height: var(--size);
        border: 1px solid #00aaee;
    }
    .main{
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    .scroll-box{
        width: 100%;
        height: 500px;
    }
    .absolute{
        position: absolute;
        --size:50px;
        bottom: 0;
        right: 0;
        width: var(--size);
        height: var(--size);
        background-color: yellow ;
    }
</style>
<body>
    <div class="box">
        <div class="main">
            <div class="absolute"></div>
            <div class="scroll-box"></div>
        </div>
    </div>
</body>

posted @ 2021-12-22 09:18 zc-lee 阅读(490) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

css - 滚动元素内的absolute

css - 滚动元素内的absolute

现象

期望效果

absolute 描述

解决

.box relative 未解决

dom 结构

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>滚动元素内的absolute</title>
	</head>
	<style>
	.box{
	--size:200px;
	width: var(--size);
	height: var(--size);
	overflow-y: auto;
	border: 1px solid #00aaee;
	}
	.scroll-box{
	width: 100%;
	height: 500px;
	}
	.absolute{
	position: absolute;
	--size:50px;
	bottom: 0;
	right: 0;
	width: var(--size);
	height: var(--size);
	background-color: yellow ;
	}
	</style>
	<body>
	<div class="box">
	<div class="scroll-box">
	<div class="absolute"></div>
	</div>
	</div>
	</body>
	</html>

	<style>
	.box{
	position: relative;
	--size:200px;
	width: var(--size);
	height: var(--size);
	border: 1px solid #00aaee;
	}
	.main{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	}
	.scroll-box{
	width: 100%;
	height: 500px;
	}
	.absolute{
	position: absolute;
	--size:50px;
	bottom: 0;
	right: 0;
	width: var(--size);
	height: var(--size);
	background-color: yellow ;
	}
	</style>
	<body>
	<div class="box">
	<div class="main">
	<div class="absolute"></div>
	<div class="scroll-box"></div>
	</div>
	</div>
	</body>