首页 > 其他分享 >CSS: offsetTop offsetLeft offsetParent

CSS: offsetTop offsetLeft offsetParent

时间:2023-06-10 10:23:15浏览次数:38  
标签:offsetParent section padding offsetLeft position article 20px margin CSS

 

offsetParent is containing block

 

1. position: static; offsetTop 元素的上外边距到containing block的上内边距 (containing block的padding + element.margin)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section>
        <article></article>
    </section>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 300px;
            height: 3%;
            margin: 10px;
            border: 20px dotted peru;
            padding: 30px;
            background-color: tan;
            position: relative;
        }

        article {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 20px dashed wheat;
            padding: 30px;
            background-color: aqua;
        }
    </style>
    <script>
        const section = document.querySelector('section')
        const article = document.querySelector('article')
    </script>
</body>

</html>

 

2. position: absolute; 先理解top(margin-top到containing block的内边距), 因此, offsetTop top + margin-top

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section>
        <article></article>
    </section>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            width: 300px;
            height: 3%;
            margin: 10px;
            border: 20px dotted peru;
            padding: 30px;
            background-color: tan;
            position: relative;
        }

        article {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 20px dashed wheat;
            padding: 30px;
            background-color: aqua;
            position: absolute;
            top: 20px;
        }
    </style>
    <script>
        const section = document.querySelector('section')
        const article = document.querySelector('article')
    </script>
</body>

</html>

 

标签:offsetParent,section,padding,offsetLeft,position,article,20px,margin,CSS
From: https://www.cnblogs.com/dissipate/p/17470844.html

相关文章

  • CSS: Determine if an element has been totally scrolled
     Element:scrollHeightproperty-WebAPIs|MDN(mozilla.org) <!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge......
  • CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight
       <!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"cont......
  • (HTML+CSS+JS)实现弹球游戏
    一、前言弹球游戏是一款很经典的游戏了,小时候无论是在掌机还是电脑都有玩过这款游戏,简简单单朴实无华,接下来我们通过前端代码来简单实现一下这个游戏吧。这是一个基于HTML5Canvas的弹球游戏的实现,通过JavaScript语言实现游戏的核心逻辑。主要包括以下部分:定义了canvas元素并......
  • CSS选择器
    前言CSS选择器用于选择具体的元素添加CSS样式。记下笔记。选择器类型类型选择器(Typeselectors)类型选择器通过结点名称匹配元素。语法&实例结点名称{样式声明}属性选择器(Attributeselectors)属性选择器用来匹配包含特定属性或者属性值的元素语法&实例[attr]表示带......
  • threejs-css2dObject操作之物体遮挡标签后应该隐藏,而不是出现透视效果
    先看coding之前的效果: 这些在背面的标签的,转到一定角度,被模型遮挡后,理论上就不应该被看到。这才是比较符合实际的coding之后(另一侧对称点就被隐藏): 具体代码(j借助于光线投影)://绑定鼠标事件,当用户移动视角后触发()functionbindRayShotEvent(){document.addEvent......
  • 下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS
    需求:点击下拉菜单按钮,显示子菜单并有过渡效果过渡效果:缓慢展开收起环境:vue2CSS分析:子菜单的高度有没有固定,如果子菜单的高度固定,可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果图片展示:展开状态收起状态 实现代码:<template><div>......
  • CSS默认支持颜色名称列表
    详见Thesyntax中的named-color。/***@returnstring[]*/Array.from($(".named-color-table").children[1].children).map(tr=>tr.children[2].innerText)......
  • 黑马程序员前端-CSS入门总结
    css入门总结一、css简介1.1css语法规范1.2css代码风格:1.3css选择器的作用二、css基础选择器2.1标签选择器:2.2类选择器2.3多类名选择器2.4id选择器:2.5id选择器和类选择器的区别:2.6通配符选择器:2.7选择器总结三、css字体属性:3.1字体大小:3.2字体粗细:3.3字体样式:3.4字体......
  • CSS禅意花园(3)-利用CSS实现下拉菜单
    版权声明:可以任意转载,但转载时必须标明原作者charlee、许多网站都使用了下拉菜单效果,但大部分都是用Javascript实现的。自己写过下拉菜单的人应该知道,处理onmouseover和onmouseout事件极其繁琐。而实际上,仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。不过遗憾的是只有完全支......
  • CSS 图片加载提前占位 padding-top、padding-bottom
    今天聊一个图片加载提前占位的一个问题......