`
mutongwu
  • 浏览: 448515 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

position定位

    博客分类:
  • CSS
阅读更多
static:静态定位,元素的默认定位方式,它简单的遵从页面文档的普通流动(flow),当元素是静态定位的时候,top和left属性无效;

relative:相对定位,该定位方式与静态定位相似,因为元素会继续遵从页面文档的普通流动(flow),除非受到其它指令的影响。但是,设置top,left属性会引起元素相对于它的原始(静态)位置进行偏移。

absolute:绝对定位,绝对定位的元素完全跳出页面布局的普通流动,它会相对于它的第一个非静态定位的祖先元素而展示,如果没有这样的元素,则相对于整个文档。

fixed:固定定位,固定定位把元素相对于浏览器窗口而定位,设置元素的top,left为0会导致它显示在浏览器的左上角,它完全忽略浏览器
滚动条的拖动,一直会出现在用户的视野中。

说明:
1.当页面设置了!DOCTYPE 时候,IE7及以后的版本支持fixed属性。
2.放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。(超出可视区域的就看不到了。)
position属性:
分享到:
评论

相关推荐

    批量输出 CSS background-position 属性的定位像素值

    批量输出`background-position`属性的定位像素值通常是在进行自动化处理或批量优化项目时的需求。这可能是为了统一网站风格,调整多个元素的背景图像位置,或者是在制作响应式设计时确保各个设备上的背景图像位置...

    浅析CSS--元素重叠及position定位的z-index顺序.pdf

    在CSS布局中,元素的位置和重叠是一个关键概念,尤其涉及到`position`定位和`z-index`属性时,这些问题往往会让开发者感到困扰。本文将深入探讨元素重叠的背景知识,以及`position`定位下的`z-index`顺序。 首先,...

    html之CSS设计(float定位和position定位详细分析)

    本文将深入探讨两种主要的定位方式:float浮动和position定位。 一、float浮动 1. **文档流**:在HTML中,元素默认按照文档流进行排列,即从左至右,从上至下。**脱离文档流**意味着元素不再遵循常规布局,而是...

    浅析CSS--元素重叠及position定位的z-index顺序.docx

    在CSS布局中,元素重叠和`position`定位的`z-index`顺序是常见的问题,尤其是在复杂的网页设计中。本文将深入探讨这个问题,以便更好地理解和解决问题。 首先,我们需要理解元素的默认行为。在HTML文档中,元素按照...

    全面剖析CSS Position定位

    CSS Position定位是CSS布局中的重要概念,它决定了元素在页面中的具体位置。定位方式有多种,包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...

    总结CSS的position定位属性在使用的一些重点

    关于CSS定位,有人很多时候都是随便用用,符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。 1.position:staticstatic属性是position的默认值,也就是说,当一个元素没有为其设定...

    position:通过地理定位获取位置信息

    failure.position 定位失败 nonsupport.position 设备不支持定位 三种API getPosition 获取设备各种信息 getCity 获取设备所属城市(根据IP获取城市名称以及城市中心点经纬度(依赖百度api,需要初始化时传入ak信息...

    通过position定位实现div底端对齐

    在CSS中,position属性是一个非常强大的工具,它允许我们对网页中的元素进行定位。使用position属性,我们可以将元素放置在相对于其正常位置的任何位置,包括通过底端对齐的方式。底端对齐通常是指将一个或多个元素...

    CSS 中position五种定位

    position定位包含哪些

    CSS的position定位和float浮动详解

    在CSS布局中,`position`和`float`是两个至关重要的属性,它们分别提供了不同的定位方式,用于控制网页元素在页面上的布局。本篇文章将详细阐述这两个概念以及它们的使用方法。 首先,我们来了解`position`定位。`...

    老生常谈position定位——让人又爱又恨的属性

    让人无奈的时候,就是我们一旦滥用了position这个定位属性,就会让自己的布局飞的满天是,又因为z-index没有设定好,基本上,整体的布局就会让你手足无措,找原因的话,又非常麻烦,最后,恐怕只能推倒重做了。...

    CSS中position定位的个熟悉示例介绍

    在CSS(层叠样式表)中,position属性是一个非常核心的定位工具,它用于指定一个元素在页面上的定位方式。position属性总共有四种定位值,分别是static、fixed、absolute和relative,下面将详细解释每一个定位值及其...

    CSS中背景background-position负值定位

    CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

    CSS 定位之position全面了解

    但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等,下面我们就position属性基本的这三个值的...

    css定位position引发的层级关系问题详解

    position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left和right根据有定位的父级元素进行定位,如果无则相对body元素即整个页面文档进行定位。 relative:相对定位,相对自己原来的位置...

    图解CSS中position属性的定位用法

    该模式包括了常规文档流,浮动,和几种类型的 position 定位的元素。其中,CSS position 属性可以取5种值:position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 ...

    css position定位属性_动力节点Java学院整理

    CSS中的`position`属性是页面布局的重要工具,它决定了元素在网页上的定位方式。本篇主要讨论`position`的四个主要值:`absolute`、`relative`、`fixed`以及`static`。 1. **绝对定位(`absolute`)**: - 当设置...

Global site tag (gtag.js) - Google Analytics