CSS Position(定位)

这篇具有很好参考价值的文章主要介绍了CSS Position(定位)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定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;
}

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

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


absolute 定位

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

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

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

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


sticky 定位

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

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

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position: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代码中的元素将被显示在最前面。文章来源地址https://www.toymoban.com/news/detail-725300.html

到了这里,关于CSS Position(定位)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(52)
  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(59)
  • 【前端|CSS系列第3篇】CSS盒模型、浮动及定位

    在前端开发中,CSS是一项重要的技术,用于控制网页的样式和布局。在本系列的第三篇文章中,我们将学习CSS的盒模型、浮动以及定位,这些概念和技术在页面布局中起着至关重要的作用。通过本文的学习,希望能够帮助大家更好地理解和运用这些关键概念。 CSS盒模型是用来

    2024年02月11日
    浏览(53)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • 【Web前端开发基础】CSS的定位和装饰

    能够说出 定位 的常见应用场景 能够说出 不同定位方式 的特点 能够使用 子绝父相 完成元素水平垂直案例 能够写出三种常见的 光标类型 (cursor) 能够使用 圆角边框 属性完成 正圆 和 胶囊按钮 效果 能够说出 display 和 visibility 让 元素本身隐藏 的区别 2.1 定位 目标:能够说

    2024年01月23日
    浏览(44)
  • CSS笔记(黑马程序员pink老师前端)定位

    定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且可以压住其他盒子。 定位 = 定位模式 + 边偏移 定位模式 说明 static 静态定位,按标准流特性摆放,没有边偏移,很少用 relative 相对定位,相对自身原有位置移动,原有位置继续占有(不脱标) absolute 绝

    2024年02月09日
    浏览(54)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(59)
  • 【后端学前端】第三天 css动画 动态搜索框(定位、动态设置宽度)

    视频地址:css动画 动态搜索框(定位、动态设置宽度)_哔哩哔哩_bilibili 通过对大的容器动态设置宽度按,也就是 这里学到一个注意点:在class后的属性会覆盖先写的属性 searchBar的最早宽度是400px,在后面又新定义了一个searchBar的样式为60px 看教程,i 定义与文本中其余部分不

    2024年02月04日
    浏览(48)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • 5-web前端 定位position

    1、相对定位 position: relative  特点:  不脱标,占用自己原来位置      显示模式特点保持不变      设置边偏移则相对自己原来位置移动 拓展:很少单独使用相对定位,一般是与其他定位方式配合使用    参考自身原位置 2、绝对定位 position: absolute 使用场景:子级

    2024年02月08日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包