如何使用水平滚动设置具有绝对位置的父元素的li元素定位 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【CSS】使用绝对定位浮动解决外边距塌陷问题 ( 为父容器子元素设置内边距边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

一、外边距塌陷描述 ---- 在标准流的父盒子中 , 添加一个标准流子盒子 ; 如果子盒子设置 100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 ,.../ 子元素设置内边距 / 边框 ---- 这里使用传统方法 : 为父容器 / 子元素设置内边距 / 边框 ; 下面是为父容器设置 1 像素的内边距 ; .father { width...style> 执行结果 : 四、使用绝对定位解决外边距塌陷...- 为子元素设置绝对定位 ---- 为子元素设置绝对定位 , 可以解决外边距塌陷问题 ; 代码示例 : <!.../ 子元素设置内边距 / 边框 */ /*padding: 1px;*/ } .son { /* 为子元素设置绝对定位解决外边距塌陷问题 */ /* 注意 : 为子元素设置相对定位

1.2K2 0

Python+selenium 自动化-滚动的使用方法，如何滚动到元素的位置

有时候页面很长，元素不在显示范围内时，我们要对元素进行操作可能就会失败，这时我们就要进行一个滚动操作，让元素显示出来就好了。...# 设置目标为某个元素，我使用xpath的定位方法 xp = "//button[text()='确定']" target = driver.find_element_by_xpath(xp) # 滚动到目标位置

2.4K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS基础（二）

伪元素概念：使用CSS模拟标签，创建网页中不重要的图用法：找父级，在父级中添加子标签伪元素作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...解决盒子与盒子之间的层叠问题让盒子始终固定在屏幕中的某个位置定位使用步骤：设置定位方式属性名：position 属性值：定位方式属性值静态定位 static 相对定位...relative 绝对定位 absolute 固定定位 fixed 设置偏移值: 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可（如果四个标签都写，以left ,...二、相对定位占有原来的位置仍然具有具体标签原有的显示模式特点改变的位置是参照自己原来的位置三、绝对定位...绝对定位如何实现居中？

1.7K2 0

css中绝对定位_绝对定位和相对定位怎么用

/*设置相对定位我们就可以使用四个方向的属性 top left right bottom 相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。...用途 1.微调元素位置 2.做绝对定位的参考（父相子绝） *{ padding: 0; margin: 0; } div{...滚动条滚动时，距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。父绝子绝，因为绝对定位脱离标准流，影响页面的布局。父相子绝是常用的布局方案。...：固定当前的元素不会随着页面滚动而滚动，特性：1.脱标 2.提升层级 3.固定不变不会随页面滚动而滚动参考点：设置固定定位，用top描述。

2.5K3 0

前端基础-CSS定位

（灵魂不在肉体永驻） 3.可以盖在标准流的上方使用场景：微调元素和配合绝对定位来实现效果 3.绝对定位从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html...总结： 1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html 2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容...），可以定义宽高，不占据标准流的空间 3.margin:auto对于设置过绝对定位的元素不起作用 4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义使用场景：配合相对定位使用...总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告案例：京东最右侧的小列表案例效果图 ?

6052 0

css属性及定位操作

overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向）定位(position) static(默认) static 默认值，无定位，不能当作绝对定位的参照物...relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!

2.4K5 0

浮动清楚浮动及position的用法

relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。示例代码： <!...z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

2.1K4 0

CSS概要

但是在网页上局部使用层布局还是有其方便之处的层模型有三种形式: 绝对定位(position: absolute) 相对定位(position: relative) 固定定位(position: fixed...) 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块...如果想为元素设置层模型中的相对定位，需要设置position:relative(表示相对定位)，它通过left、right、top、 bottom属性确定元素在正常文档流中的偏移位置。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...CSS 设计技巧 • 水平居中设置-行内元素通过给父元素设置 text-align:center 来实现的 • 水平居中设置-定宽块状元素通过设置“左右margin”值为“auto”来实现居中的

1.4K5 0

CSS笔记(14)

子绝父相: 子级使用绝对定位,父级使用相对定位子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置....当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变....跟父元素没有任何关系不随滚动条滚动固定定位不再占有原先的位置固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位. 固定定位小技巧:固定在版心右侧位置....定位拓展: 绝对定位和固定定位也和浮动类似. 行内元素添加绝对或固定定位,可以直接设置高度和宽度....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度). 浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题.

5661 0

前端之CSS内容

inherit 规定应该从父元素继承overflow属性的值 overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 6、定位（position...6.2 relative（相对定位）　　相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...6.3 absolute（绝对定位）　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...重点：如果父级设置了position属性，例如 position:relative; 那么子元素就会以父级的左上角为原点进行定位。...在理论上，被设置为 fixed 的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。示例代码： <!

5.2K10 0

HTML+CSS练习题【详解】

固定定位的元素会跟随浏览器滚动条进行滚动 B. 绝对定位的元素会参考设置了定位(非静态)的父元素或者祖级元素进行定位对齐 C. 静态定位是元素的默认定位方式，不需要设置 D....相对定位的元素保留自身在标准流中的位置，并且为绝对定位的子元素提供参考关于绝对定位、固定定位、相对定位和静态定位，下列说法正确的是( ) A. 固定定位会参考设置了定位的父元素进行对齐 B....绝对定位只会根据浏览器可视区域定位下列关于定位属性及特点说法正确的是 ( ) A. 绝对定位的元素会参考设置了相对定位的父元素进行定位 B. 固定定位会参考设置了定位的父元素进行定位 C....相对定位大多数使用与绝对定位配合，组成子绝父相以下选项，针对绝对定位描述错误的是( ) A. 绝对定位元素脱离标准流 B. 绝对定位元素实现模式转换 C....绝对定位元素会固定在页面某个位置, 不随着滚动条的滚动而滚动 D. 绝对定位的元素可以使用边偏移属性固定定位元素的位移参照物是( ) A. 自身原本的位置 B. 参照浏览器的可视区域 C.

1751 0

CSS入门？一篇就够了！

也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!...绝对定位absolute (拼爹型) [注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。...父级没有定位若所有父元素都没有定位，以浏览器为准对齐(document文档)。父级有定位绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。...固定定位完全脱标，不占有位置，不随着滚动条滚动。叠放次序（z-index）当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

5K2 0

前端学习笔记之CSS知识汇总 CSS介绍

（position） static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。...relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。示例代码： <!

2.1K3 0

02 . 前端之CSS

可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置 2 . absolute（绝对定位）　　定义：设置为绝对定位的元素框从文档流完全删除...，也会有父级标签塌陷的问题，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...因为它原本所占的空间仍然占据文档流。　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。.../*top: 100px;*/ /*绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签设置了,position为relative的标签位置进行移动,...只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index 3 . z-index值没有单位，就是一个正整数

1.5K6 0

CSS笔记

用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。...:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间定位 postion: absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于 static...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...sticky(粘性定位)，基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像position:relative;它的表现就像 position:fixed;，它会固定在目标位置。...left right none 布局-水平&垂直对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto; 文本在元素内居中对齐，可以使用 text-align: center; 导航栏

1.9K2 0

前端(二)-CSS

1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置； 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响； 3.设置相对定位的盒子原来的位置会被保留下来...； 4.浮动后，相对定位，相对于盒子浮动后的位置，进行定位，盒子原始位置不会保留； 6.2 absolute 绝对定位 absolute属性值：偏移设置： left、right、top、bottom...；绝对定位的规律 1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移； 2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位； 3.绝对定位的元素从标准文档流中脱离...，这意味着它们对其他元素的定位不会造成影响； 4.元素位置发生偏移后，它原来的位置不会被保留下来； 5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位；使用场景...：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景； 6.3 fixed 固定定位偏移设置： left、right、top、bottom；类似绝对定位，不过区别在于定位的基准不是祖先元素

1.8K2 0

理解CSS - 笔记

状态类伪类：选择元素的不同状态的样式，比如 a:hover（鼠标覆盖时）、a:focus（获得焦点时）等结构类伪类：根据元素所处结构、位置等选择样式，比如 li:first-child（父元素中的第一个子元素...当要设置的属性值能自动继承并且父元素有相应的定义值时，该元素会继承父元素的值，即行为与`inherit`相同 2....: relative 相对自身原本位置偏移，不脱离文档流要点：在常规流里面布局相对于自己本应该在的位置进行偏移使用 top、left、bottom、right 设置偏移长度文档流内的其它元素把它当作没有偏移的正常元素来布局...absolute 定位需要配合 top、bottom、left、right 属性使用，表示对于上下左右的间隔距离 # position: fixed 相对于视口绝对定位要点：脱离常规流，即不为元素预留空间...相对于屏幕视口（viewport）的位置来指定元素位置元素的位置在屏幕滚动时不会改变 fixed 定位也需要配合 top、bottom、left、right 属性使用，表示对于视口上下左右的间隔距离

1.6K2 0

五. css 布局之 position（定位）

1.定位的简介定位（position）定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值： static 默认值，元素是静止的没有开启定位...right：定位元素和定位位置的右侧距离定位元素水平方向的位置由left和right两个属性控制通常情况下只会使用一个 left越大元素越靠右 right越大元素越靠左 <!...当元素的position属性值设置为absolute时，则开启了元素的绝对定位绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离...1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质...将元素的position属性设置为fixed则开启了元素的固定定位固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动

2.1K4 1

【网页前端】CSS常用布局之定位

绝对定位 5.1 概述&入门案例绝对定位：通过设置边偏移，直接将元素放置在页面内或父元素内的某一位置。...不受父元素约束 6.3 总结 1 、固定定位和绝对定位都是脱离了标准流，不会影响标准流布局（也不影响浮动） 2 、固定定位元素，哪怕拖动滚动条，元素位置也保持在页面不变。...、仅定位元素才可以设置 z-index ，标准流和浮动设置无效 8.2 定位子元素-水平垂直居中 8.2.1 引言&概念有时我们存在需要让子元素在父元素中水平居中的需求，若使用标准流或浮动...所以 CSS 中，我们需要学习如何通过设置边偏移 +margin ，达到水平居中效果。...- 设置：绝对定位，子元素在父内水平垂直居中（如果父是 body ，相当于页面水平垂直居中）  子元素 - 设置：固定定位，子元素在页面内水平垂直居中适用于：手动自定义设置子元素的水平垂直居中效果

1.2K4 0

前端学习(14)~css学习(八)：定位属性

所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。...以盒子为参考点一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。如下：（子绝父相） ? 以下几点需要注意。...让绝对定位中的盒子在父亲里居中我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。...我们可以总结成一个公式： left:50%; margin-left:负的宽度的一半固定定位固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。备注：IE6不兼容。...定位了的元素，永远能够压住没有定位的元素。（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

8892 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭