CSS定位position使用介绍

position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit

属性值为relative、absolute、fixed时top | left | right| bottom | z-index才能起作用。

static(默认值)

relative(相对定位)

absolute(绝对定位)

立即学习“前端免费学习笔记(深入)”;

fixed(绝对定位,绝对与window浏览器,低版本浏览器不支持如ie6和ie7)

relative和static都是相对于文档其他元素进行定位,都属于相对定位的范畴,区别在于一个可用控制位移,一个不能

 

static(默认值)

如果使用默认值,在CSS中为元素定义top、left、right、bottom、z-index都不会生效

relative

relative的变现和默认值一样,只不过可用通过设置偏移量和z-index来控制相对于其他正常位置进行的偏移。

所有元素的定位(positon)默认值都是static,什么都不写就是相对定位,而使用position:relative在不设置topp、left、z-index、right、bottom值的情况下和默认值表现是一样的。

absolute和fixed

特点:

1、块级元素的宽度在未定义时不再为100%,而是根据内容自动调整

2、在不定义z-index的情况下,absoulte元素会覆盖在其他元素上。

3、它会脱离正常的文档流,不再占据空间,类似于属性0后的效果

absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position,absolute将相对于整个属性1进行绝对定位。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。也就是说,不论网页如何滚动,该元素始终停留在屏幕的某个位置。如果我们希望左侧边控制栏始终对用户可见,就使用position:fixe来进行定位。

 

如果ie6和ie7不支持fixed属性怎么办

解决办法

用position:absolute

_top:expression(eval(属性2.documentElement.scrollTop))

以上就是CSS定位position使用介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608030.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:24:43
下一篇 2025年12月18日 20:20:20

相关推荐

  • 关于css的垂直水平居中六种方法分享

    总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。 *1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins; .div { width: 200px; height: 200px; margin: auto; po…

    好文分享 2025年12月23日
    000
  • 详解css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下css中margin属性的两种特殊现象  1, 外边距的合并现象: 如果两个p上下排序,给上面一个p设置margin-bottom,给下面一个p设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个。  对于这种现象一般不用处理。 2,margin…

    好文分享 2025年12月23日
    000
  • 如何解决css文件失效的方法

    css都是正确的,链接也没有出错的话,为什么偏偏css样式不生效 Transitional类型:是指一种过渡类型,使用这种类型浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。这种是现在通用的方法,用dreamweaver创建网页时默认就是这种类型。aa…

    好文分享 2025年12月23日
    000
  • 使用css设置div背景颜色的方法介绍

    这篇文章主要介绍了css设置p背景颜色的方法,需要的朋友可以参考下 一、p标签内直接设置背景颜色 代码如下: 背景为黑色 p标签内设置背景色为黑色,字体颜色为白色 立即学习“前端免费学习笔记(深入)”; p标签内设置背景色截图 通过p标签内设置style设置背景色等CSS样式。 二、外部css设置p…

    2025年12月23日
    000
  • 使用css实现页面居中的方法介绍

    在网页制作的过程中,为方便读者的阅读,会把网页内容限定在一个较小的方框中,并居中显示,如何实现这一功能呢? 1)把正文放在一个 标签中,只要这个标签居中整个网页就居中了。 2)接下来要介绍一种方法:负边框,即 margin 的值为负 #text{ 立即学习“前端免费学习笔记(深入)”;     pa…

    好文分享 2025年12月23日
    000
  • 实现css文字飞入效果示例代码

    这篇文章实现css文字飞入效果示例代码 一、页面的主体布局 左右淡入的企业介绍 上海世茂集团企业招聘 世茂集团,是以房地产开发为主的国际化企业集群,房地产界领袖企业之一。 上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了,一个多余的美观性布局我都不愿意写QAQ,最直接的代码是为了方便我…

    好文分享 2025年12月23日
    000
  • 详解CSS属性值用法

    万维网联盟(w3c) 使用了一套特别的语法来定义 css 的属性值,能让所有的 css 属性都用。如果你曾看过 css 规范,你可能已经见过这套语法了。就像  border-image-slice  的语法 ,让我们看看: = [ | ]{1,4} && fill?如果你不知道这些符…

    2025年12月23日 好文分享
    000
  • 详解css中border-image的使用方法

    border-image-source 属性设置边框的图片的路径[none | ] p { border: 20px solid #000; border-image-source: url(border.png);} border-image-slice 属性图片边框向内偏移[ | ](1,4) …

    2025年12月23日
    000
  • 解析CSS3中nth-child与nth-of-type的区别

    css3中nth-child与nth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是…

    2025年12月23日 好文分享
    000
  • CSS常用字体属性:background-origin和background-clip介绍说明

    (一)常用的字体属性:       font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗       font-size:字体大小,单位可以为px或者%       font-family:字体族 比如说:微软雅黑       font-style:…

    好文分享 2025年12月23日
    000
  • CSS中的伪类与伪元素及二者间的区别说明

    这篇文章主要介绍了详解css中的伪类与伪元素及二者间的区别,实际上css3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下 CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选…

    2025年12月23日 好文分享
    000
  • 使用CSS实现文字环绕图片效果

    这篇文章主要为大家详细介绍了css文字环绕图片遇到的问题及解决方法,感兴趣的小伙伴们可以参考一下 CSS实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。 我们先设定float的参数,…

    2025年12月23日 好文分享
    000
  • 利用CSS中linear制作复杂的边框效果实例分析

    这篇文章主要介绍了利用css中linear制作复杂的边框效果实例分析的相关资料,利用linear-gradient属性制作绚丽的边框效果 网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码,大家可以在自己的电脑中查看效果: .box { margin: 80px …

    2025年12月23日
    000
  • 分析CSS样式表、继承、层叠和属性的值

    这篇文章分析CSS样式表、继承、层叠和属性的值  构造样式表并添加注释 1. css里有控制基本格式的属性(如font-size和color等),有控制布局的属性(如position和float等),还有决定访问者打印时在哪里换页的打印控制元素。除此之外还有其他很多的属性。2. 样式表中包含定义网页…

    好文分享 2025年12月23日
    000
  • CSS盒子模型介绍

    什么是css盒子模型?css盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型 一、什么是CSS? CSS(Cascading Style Sheet):层叠样式表是将网页的内容与样式进行分离的一种语言,也就是在aspx或html中设计网页的…

    2025年12月23日
    000
  • 必看的CSS小知识

    下面小编就为大家带来一篇必看的css小知识。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经 验的程序员,我相信你未必知道color属性除了…

    2025年12月23日 好文分享
    000
  • CSS教程之div垂直居中的多种方法

    这篇文章主要为大家详细介绍了css教程之p垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我…

    好文分享 2025年12月23日
    000
  • CSS超出文本指定宽度用省略号代替和文本不换行分析

    这篇文章主要介绍了css超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到本站平台,供大家参考 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertr…

    好文分享 2025年12月23日
    000
  • CSS等高布局的6种方式介绍

    下面小编就为大家带来一篇css等高布局的6种方式介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 前面的话 等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负mar…

    2025年12月23日 好文分享
    000
  • css实现背景透明和文字不透明方法

    这篇文章介绍css实现背景透明和文字不透明方法 实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到…

    2025年12月23日 好文分享
    000

发表回复

登录后才能评论
关注微信