css的position定位详解

  1. position元素定位四个取值:static(静态默认文档流),relative(相对定位,相当于原文档流进行定位),absolute(绝对定位,相当于上个已经定位的父级元素进行定位),fixed(相当于浏览器窗口进行固定)
  2. relative情况:相对定位,会根据之前进行位置偏移,但是原来位置留着空白,保留原来文档流
    1. 代码详情:
    2. html部分: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div>
    3. css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px;} 3.absolute情况:相绝对定位,根据父级已经定位的元素进行偏移,如果父级元素没有定位以body进行偏移,偏移后不占用文档流,偏移后,下面的元素进行部位上去
      1. 父级元素没有定位的absolute定位情况:
    1. 代码详情
      1. html代码: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div> css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px; background:blue; }

    ii.父级元素定位(相对relative)的absolute定位情况:

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    iii.  父级元素定位(绝对定位absolute)的子元素relative定位情况:父元素原文档流空白,子元素保留原来文档流空白

    4.fixed固定:相当于浏览器窗口固定(不随导航条位置改变)

    5.static默认正常文档流,没有变化

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

19210
来自专栏柠檬先生

jquery mobile 移动web(2)

button 按钮   data-role="button" 将超链接变成button。   具有icon 图标的button 组件...

1985
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

1402
来自专栏一个爱吃西瓜的程序员

Web前端基础【1】--HTML基础

HTML不是编程语言,是一种表现网页信息的符号标记语言。标记语言是一套标记,HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档,并以网页的形式显...

3698
来自专栏一“技”之长

标签之美五——网页表格的设计 原

1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内。

881
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:快速在手机上实现n×m形式的菜单(IconMenuView)

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

1751
来自专栏互联网杂技

关于css

常用的选择器:标签选择器,id选择器,class选择器,伪类选择器。 但是还有一个功能强大的选择器:属性选择器, 属性选择器,这样使用, 1、[属性名]{st...

3537
来自专栏前端小叙

多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?

我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-it...

1533
来自专栏偏前端工程师的驿站

当css属性width设为100%时

  平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会...

2175
来自专栏smy

pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系

如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250  不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了...

3116

扫码关注云+社区

领取腾讯云代金券