css的postion属性

在实际项目中,发现postion这个属性经常使用而且常常很重要,所以总结整理一下知识点

css中postion属性有以下可选值,分别是:static,absolute, fixed, relative,inherit

  • postion:static   无定位

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

该属性是所有元素定位的默认情况,在一般情况下,我们不需要特别地去声明它,但有时遇到继承的情况,我们不愿意元素所继承的属性影响本身,从而可以用postion:static取消继承,即还原元素定位的默认值。

  • postion:absolute  绝对定位

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • postion:fixed 相对于窗口的固定位置

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  • postion:relative 相对定位

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • postion:inherit

规定应该从父元素继承 position 属性的值。

原文地址:https://www.cnblogs.com/shenting/p/10423819.html

时间: 2024-10-03 16:19:23

css的postion属性的相关文章

CSS的position属性

position属性的定义和用法:检索或设置对象的定位方式.设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局.假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有margin,但仍有padding和边框border.要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个.否则上述属性会使用他们的默认值auto ,这将导致对

CSS中Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ

CSS中连接属性的排序

在CSS超链接的属性中,有四个连接方式: a:link  a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了,查找了一些资料,也上网查找了一下,也有很多人在问及这个问题,如果是按照这种顺序排序,有时候显示正确,而有时候却显示不正确,追究原因,这个可能是由于浏览器的识别先后问题所导致的,也额能有缓存的原因在里面个人觉得,而最正确的写法应该是 L V H ,举个例子: <!DOCTYP

CSS中box-sizing属性的理解与部分用法

今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分为两派,一派是W3C的标准模型,一派是IE的传统模型.那它们之间有什么不同的呢?首先需要明确它们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系:而不同的地方就在于两者的计算方法不一至:(下面引用一些公式向大家展示一下两者的

CSS border边框属性教程(color style)

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

css常用样式属性详细介绍

对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级点的,这才是一个靠谱的渐进过程,下面列出一些css常用属性,仅供参考 “文字”属性共有8项: 1.“字体”(font-family),设定时,需考虑浏览器中有无该字体. 2.“大小”(font-size),注意度量单位. 3.“粗细”(font-weight),除了normal(正常).bold(粗

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

css常用文本属性

[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体