草庐IT

CSS Position(定位)

runoob 2023-04-05 原文

CSS Position(定位)


position 属性指定了元素的定位类型。

position 属性的五个值:

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。


static 定位

HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

实例

div.static { position: static; border: 3px solid #73AD21; }

尝试一下 »

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

实例

p.pos_fixed { position:fixed; top:30px; right:5px; }

尝试一下 »

注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。


relative 定位

相对定位元素的定位是相对其正常位置。

实例

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

尝试一下 »

移动相对定位元素,但它原本所占的空间不会改变。

实例

h2.pos_top { position:relative; top:-50px; }

尝试一下 »

相对定位元素经常被用来作为绝对定位元素的容器块。


absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

实例

h2 { position:absolute; left:100px; top:150px; }

尝试一下 »

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。


sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relativeposition:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

实例

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

尝试一下 »

重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序:

实例

img { position:absolute; left:0px; top:0px; z-index:-1; }

尝试一下 »

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。


更多实例

裁剪元素的外形

此示例演示如何设置元素的外形。该元素被剪裁成这种形状,并显示出来。

如何使用滚动条来显示元素内溢出的内容

这个例子演示了overflow属性创建一个滚动条,当一个元素的内容在指定的区域过大时如何设置以适应。

如何设置浏览器自动溢出处理

这个例子演示了如何设置浏览器来自动处理溢出。

更改光标

这个例子演示了如何改变光标。


所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性 说明 CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto
length
%
inherit
2
clip 剪辑一个绝对定位的元素 shape
auto
inherit
2
cursor 显示光标移动到指定的类型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto
length
%
inherit
2
overflow
设置当元素的内容溢出其区域时发生的事情。 auto
hidden
scroll
visible
inherit
2
overflow-y
指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
overflow-x
指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit
2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit
2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit
2
z-index 设置元素的堆叠顺序 number
auto
inherit
2

有关CSS Position(定位)的更多相关文章

  1. 「Python|Selenium|场景案例」如何定位iframe中的元素? - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时,对于使用了iframe的页面,如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候,可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签,如果直接查找是无法找到的,会抛出没有找到元素的异常。比如近在咫尺的例子就是,CSDN的登录窗体就是使用的iframe,大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素,会抛出NoSuchElementException异常。解决

  2. 打通源码,高效定位代码问题|云效工程师指北 - 2

    大家好,我叫胡飞虎,花名虎仔,目前负责云效旗下产品Codeup代码托管的设计与开发。代码作为企业最核心的数据资产,除了被构建、部署之外还有更大的价值。为了帮助企业和团队挖掘更多源代码价值以赋能日常代码研发、运维等工作,云效代码团队在大数据和智能化方向进行了一系列的探索和实践(例如代码搜索与推荐),本文主要介绍我们如何通过直接打通源代码来提高研发与运维效率。随着微服务架构的流行,一个业务流程需要多个微服务共同完成。一旦出现问题,运维人员在面对数量多、调用链路复杂的情况下,很难快速锁定导致问题发生的罪魁祸首:代码。为了提高排查效率,目前常见的解决方案是:链路跟踪+日志分析工具相结合。即通过链路跟踪

  3. ruby - 在 Mac 上定位 "irbrc"文件 - 2

    我看到很多很酷的东西可以添加到我的Ruby控制台中。例如,一个好的列表是“My.irbrcforconsole/irb”。我用谷歌搜索,但我只找到了网络日志,上面写着人们在他们的.irbrc中添加了什么gem。没有人说在哪里可以找到它。我找不到“irbrc”。我打开了我的主文件夹,如果我输入IRB,它会转到Ruby控制台,但我找不到这个文件。谁能帮我找到它? 最佳答案 这是一个irbrc点文件,因此您需要在您的主目录中ls-a才能找到它。如果它不在那里,只需创建一个.irbrc文件。我的很简单,但这就是我的内容:require'ru

  4. ruby-on-rails - capybara :查找(元素)使用选择器来定位复杂的属性名称 - 2

    使用cucumber和capybara测试Rails应用。假设我无法更改标记,我可以使用capybara在充满类似td和select的页面中选择以下选择吗?LanguagesCommunication这似乎失败了(我假设是因为嵌套的“[”和“]”)。find("select[name=attributes[ruby][category]]")转义也不行。想法? 最佳答案 您可以尝试find('select',:name=>'attributes[ruby][category]')或find_field('attributes[rub

  5. 基于对象属性定位的 Ruby 数组方法? - 2

    假设我有一个Ruby类,Flight。Flight上有一个attr_accessor:key。如果有一个此类的实例数组:flights=[flight1,flight2,flight3],我有一个“目标键”,比如说“2jf345”,我想根据它找到一个航类键,来自该数组-我应该使用哪种代码?这是我要使用的代码:航类[flights.map{|s|s.key}.index(target_key)]但是对于Ruby,似乎应该有更简单的方法。此外,上面的代码为我返回了一个错误-`[]':noimplicitconversionfromniltointeger(TypeError)。我认为这意味

  6. ruby - 在 Ruby 中将元素重新定位到数组的前面 - 2

    即使来自javascript,这对我来说也很糟糕:irb>>a=['a','b','c']=>["a","b","c"]>>a.unshift(a.delete('c'))=>["c","a","b"]有没有更清晰的方法将元素放在数组的前面?编辑我的实际代码:if@admin_users.include?(current_user)@admin_users.unshift(@admin_users.delete(current_user))end 最佳答案 也许这对你来说更好看:a.insert(0,a.delete('c'))

  7. ruby-on-rails - Ruby 地理定位 Gem/插件 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion什么可用的(最好的)基于ruby​​IP的地理定位gem/插件?它们在功能、性能和易用性方面如何相互比较(例如,它们是否与网络服务交互,或需要单独的数据库等)?希望有使用过的friend可以分享一下经验和建议。

  8. ruby-on-rails - 如何使用 capistrano deploy 定位特定的提交 SHA - 2

    我想知道如何使用Capistrano在Git中针对特定的提交SHA进行部署?应该是这样的capdeploy--version=经过大量搜索似乎无法找到这个问题的答案。 最佳答案 对于Capistrano2.9到3.0:cap-Srevision=80655da8d80aaaf92ce5357e7828dc09adb00993deploy对于旧版本的Capistrano,您可以通过执行以下操作来部署特定的gitcommit/tree/branch/tag:cap-sbranch=80655da8d80aaaf92ce5357e7828

  9. javascript - 如何使用 grunt autoprefixer 定位 IE9 及更高版本? - 2

    如何使用gruntautoprefixer针对IE9及更高版本?我可以做类似以下的事情吗:grunt.config('autoprefixer',{options:{browsers:['IE9+']},dist:{expand:true,src:'/styles/app.css'}}); 最佳答案 browsers选项的语法可以在主Autoprefixerdocumentation中找到。.相关位是:Firefox>=20isFirefoxversion20ornewer.和:Browsersnames(caseinsensiti

  10. javascript - jquery定位方法 - 2

    根据JqueryAPI文档:.position()返回:对象描述:获取匹配元素集中第一个元素的当前坐标,相对于父元素的偏移量。此方法不接受任何参数。引用here但是我在某个地方发现了这个:$("#position1").position({my:"center",at:"center",of:"#targetElement"});一个对象被传递给位置方法。这不是违反API文档吗?上面传递给对象的属性似乎有一些特殊的含义。那些属性说明了什么。它们做了什么?我是一个完全的初学者jquery.So可能是我错了。 最佳答案 .positio

随机推荐