首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】定位 ③ ( 绝对定位 | 容器有定位相对于容器定位 | 容器没有定位相对于浏览器进行定位 )

一、绝对定位 ---- 绝对定位 是以 级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 容器有定位 , 则相对于容器的坐标进行定位 ; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果容器没有定位 , 则查找容器容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中..., 使用的就是 相对定位 ; 为容器添加了相对定位 , 子容器也会相对于 容器 进行定位 ; 二、标准流下的容器与子元素关系 ---- 1、标准流下容器与子容器代码 标准流 容器 中 包含一个...移动 标准流 容器盒子 , 发现子容器也随着 容器 一起移动 , 这种情况下 容器 与 子容器 是绑定到一起的 ; 为容器设置 100 像素的外边距 , 此时 容器 与 嵌套的子元素 一起向下和向右移动了..., 则相对于容器的坐标进行定位 ; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 1、容器没有定位的情况下为子容器添加定位 下面这种情况就是 容器没有定位 , 子元素 相对于浏览器进行定位

81820
您找到你想要的搜索结果了吗?
是的
没有找到

offsetWidth和clientWidth

在項目–移動框中使用到了clientX/Y和offsetWidth,在此來記錄使用方法 offset系列:偏移量,動態的大小,位置(偏移量)等等… offsetLeft: 是相對於親的偏移量,當元素的元素有設置定位...若沒有所有元素都沒有設置定位,則會以BODY為主 語法: (number =) element.offsetLeft; offsetTop:返回元素對元素相對上方的距離 與offsetLeft相似,...返回的是與親相對上方的距離。...var offsetWidth =element.offsetWidth; offset跟style雖然都是還元素的寬高大小有關,但是還是有不一樣的區別 1.style.width是只能取到內嵌的樣式也就是如果樣式寫在...css裡面則是不到的,但是offsetWidth則可以 2.單位 3.offsetWidth是包含了borderr跟padding,style.width則沒有 4.offsetWidth通常用於取值

36730

【CSS】定位 ⑥ ( 使用绝对定位在容器任意位置显示子容器 | 代码示例 )

一、需求分析及核心开发要点 ---- 要实现如下功能 , 下图 粉色 部分是 整体 容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ; 首先分析容器元素...; 由于 子元素 需要使用 绝对定位 , 此处的 容器 必须设置 相对定位 ; 上图中 , 容器存在 1 像素的边框 , 容器 中设置一个内边距 ; 设置子元素浮动后 , 浮动的元素 可以覆盖到...内边距 范围 ; /* 最外层 容器盒子 */ .box { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: relative; /* 内容尺寸...相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的元素容器中 , 可以使用绝对定位在容器的任意位置显示任何元素 ;.../* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: absolute; /* 该盒子在容器左上角 */

1.1K10

【CSS】浮动 ⑥ ( 浮动元素与容器盒子关系 | 代码示例 )

文章目录 一、浮动元素与容器盒子关系 二、代码示例 1、有内边距的情况 2、没有内边距的情况 一、浮动元素与容器盒子关系 ---- 在 容器 盒子模型 中 , 将 子元素 设置为 浮动元素 ,...会出现如下情况 : 浮动元素位置 : 浮动元素 会自动 浮动到 容器盒子模型 的左上角 与 右上角 , 浮动元素 与 容器盒子模型边框 : 浮动元素 与 容器 边框不重叠 , 如果没有内边距 ,...浮动元素 紧贴边框 内测 ; 浮动元素 与 容器盒子模型 内边距 : 浮动元素 紧贴 容器内边距 ; 二、代码示例 ---- 1、有内边距的情况 在下面的代码中 , 容器 边框 20 像素 ,...type="text/css"> /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 容器盒子模型...: /* 容器盒子模型 */ .father { width: 400px; height: 400px; background-color: pink; /

76130
领券