`
chinahotdog
  • 浏览: 12797 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS的三种定位方式

阅读更多

1.静态定位,position:static;是元素的默认的定位方式,简单的地按照文档的普通流动,top和left属性无效。
2.相对定位,position:relative;元素还是会按照文档的普通流动,但是,top和left属性的值会使得它相对它本来应该的位置作偏移。
3.绝对定位,position:absolute;元素完全跳出页面布局的普通流动,它会相对于它的第一个非静态定位的祖先而展示。如果没有这样的祖先,则相对于整个文档。

4.固定定位,position:fixed;元素相浏览器窗口而定位。它会忽略浏览器的滚动条,一直可见的!

例子:见附件 

 

分享到:
评论

相关推荐

    详解css定位与定位应用

    ### 详解CSS定位与定位应用 #### CSS定位概述 定位技术是Web开发中不可或缺的一部分,尤其是在页面布局的设计过程中。良好的定位技巧能够帮助开发者构建出既美观又实用的网站界面。CSS提供了多种定位方式,包括...

    CSS+Js定位与相对定位

    CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中,相对定位是基础,它允许元素相对于其原始位置进行偏移,但不会改变文档流。相对定位的CSS代码通常写作: ```css .element { position: ...

    前端css定位.pdf

    绝对定位是一种脱离标准流的定位方式,它不再占据原来的空间,并且以最近的已定位的父元素作为参考点进行定位。如果没有已定位的父元素,那么元素会以文档体作为参考。绝对定位元素经常与“子绝父相”的技术搭配使用...

    css定位绝对相对定位

    相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素设置了`position: relative;`后,该元素将根据自身的初始位置进行偏移。如果指定了`...

    CSS_样式定位图

    CSS_样式定位图

    css图片定位

    CSS提供了多种定位方式,包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。静态定位是元素的默认定位方式,不改变元素在文档流中的位置。相对定位则...

    css浮动和定位

    **二、CSS定位** 定位(Positioning)提供了更精细的控制,使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型: 1. **静态定位(static)**:这是元素的默认定位方式,遵循正常文档流。 2. **相对...

    css-绝对定位的参考对象

    在CSS中,定位分为静态定位、相对定位、绝对定位、固定定位等几种方式。静态定位是默认的定位方式,元素遵循正常的文档流;相对定位则保持元素在文档流中的位置,但允许通过偏移量改变位置;而绝对定位则彻底脱离...

    css的三种定位方式使用探讨

    在CSS布局中,有三种主要的定位方式:普通定位、浮动定位和绝对定位。这三种定位方式各有特点,用于满足不同的页面布局需求。 1. **普通定位(Normal Flow)**: - 普通定位是HTML元素默认的布局方式,元素按照其...

    css sprite 组合图 定位 生成

    CSS Sprite是一种网页图像优化技术,它将多个小图像合并到一张大图(组合图)中,然后通过CSS的背景定位来显示需要的部分。这样做的主要目的是减少HTTP请求次数,提高页面加载速度,优化用户体验。当你在网页设计中...

    css中的定位

    #### CSS定位机制概述 CSS(层叠样式表)为网页提供了强大的样式控制能力,其中定位机制是实现复杂布局的关键技术之一。CSS提供了多种定位方式,包括普通流、浮动以及绝对定位等,每种方式都有其特定的应用场景。 ...

    基于CSS技术的测距定位原理

    CSS定位系统通常由多个锚点(固定位置的参考节点)和标签节点(移动的目标节点)构成。通过测量标签节点与多个锚点之间的距离,可以确定标签节点在空间中的具体位置。系统架构可以实现不同的功能,如动态跟踪和路径...

    css元素常见定位应用.html

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...

    css定位学习小结.md

    作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left ...

    html+css定位练习

    总的来说,HTML+CSS定位是网页设计中的关键技能,熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集,希望你能深入理解定位的概念,提升你的网页设计能力。记得多实践、多尝试,理论与实践相结合才能...

    CSS定位

    本篇文章将深入探讨CSS定位模型,包括static、relative、absolute、fixed以及flexbox和grid等定位方式,帮助你更好地理解和应用这些概念。 首先,我们从最基础的定位方式开始——`static`定位。这是所有元素默认的...

    Css Sprite Tools(CST CSS图片拼合定位工具) 1.0 

    在网页设计中,CSS Sprite(CSS精灵)是一种常见的优化网页加载速度的方法,通过将多个小图像合并成一个大图,然后利用CSS的背景定位属性来显示需要的部分,以此减少HTTP请求次数,加快页面加载速度。CST CSS图片...

    html css中的定位

    首先,我们需要理解 CSS 中的基本定位方式。CSS 提供了多种定位模型,如静态定位、相对定位、绝对定位、固定定位和粘性定位。这些定位方式都是为了帮助开发者更好地控制元素在页面上的位置和排列。 1. 静态定位...

Global site tag (gtag.js) - Google Analytics