首页 > 其他分享 >CSS Position学习

CSS Position学习

时间:2023-06-04 16:37:36浏览次数:35  
标签:relative sub2 img sub1 color 学习 Position CSS absolute


介绍

CSS Position有四个属性:
[color=darkblue]relative
absolute
fixed
static(默认)[/color]
样例
<div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>
sub1和sub2是同级关系,parent是它们的父级元素。

[color=red][b]1. relative(相对定位)[/b][/color]
相对定位指的是相对于这个元素原位置的定位,且会占住原来的位置。
所谓原位置指不设置relative属性时它的位置(既static属性时的位置)
relative偏移相对的是margin的左上侧。

例如对sub1设置relative属性后,会根据top,right,bottom,left属性偏移,而sub2的位置不变(sub1会占住原来的位置)
[img]

CSS Position学习_文档流

[/img]
再对sub2设置relative属性,它也会相对其原来的位置偏移(sub2位置还会被占着)
[img]

CSS Position学习_.net_02

[/img]

[color=red][b]2. absolute(绝对定位)[/b][/color]
绝对定位是根据其最近进行定位的父对象的 padding 的左上角进行定位,基本分为以下两种情况:

例如对sub1设置absolute,如果sub1的父级元素(parent或者其父级元素)设置了absolute或relative,那么sub1就会相对这个父元素定位。
如果父级元素都没有设置absolute或relative,那sub1相对body定位。
这时由于sub1的位置“腾出来了”,sub2就会跑到sub1的位置(也可以理解sub1浮起来了,dreamweaver中叫做层),它的文档流就会基于parent。
[img]

CSS Position学习_.net_03

[/img]
如果再对sub2设置absolute,那其也是相对parent的。
[img]

CSS Position学习_父级元素_04

[/img]

[color=red][b]3. fixed[/b][/color]
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

[color=red][b]4. static(默认)[/b][/color]
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

标签:relative,sub2,img,sub1,color,学习,Position,CSS,absolute
From: https://blog.51cto.com/u_3871599/6410931

相关文章

  • CSS实现兼容性的渐变背景(gradient)效果
    一、有点俗态的开场白要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众......
  • CSS3动画简介
    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html[/url]参考:[color=red]CSS3transform旋转属性[/color][url]http://www.w3school.com.cn/cssref/pr_transform.asp[/url][color=red]CSS3transition渐变属性[/color][url]h......
  • 【学习笔记】(18) 长链剖分
    长链剖分1.算法简介与性质长链剖分本质上就是另外一种链剖分方式。长链剖分与重链剖分有相通之处,后者是将子树大小最大的儿子作为重儿子,前者则是将子树深度最大的儿子作为重儿子。可见两者只是换了一个剖分形式。长链剖分有如下性质:性质1:每个节点所在长链末端为其子树......
  • 【学习笔记】(14) 初等数论(一)
    1.【最大公约数(GCD)和最小公倍数(LCM)】【基本性质、定理】\(\largegcd(a,b)=gcd(b,a−b)(a>b)\)\(\largegcd(a,b)=gcd(b,a\)\(\largemod\)\(b)\)\(\largegcd(a,b)\)\(\largelcm(a,b)=ab\)【推导结论】\(\largek|gcd(a,b)⟺k|a\)且\(k|b\)\(\larg......
  • babylon.js 学习笔记(9)
    继续学习sprite用法,做为一个游戏引擎,怎能没有Sprite(精灵),下面是基本示例:constcreateScene=function(){constscene=newBABYLON.Scene(engine);constcamera=newBABYLON.ArcRotateCamera("Camera",-Math.PI/2,Math.PI/2,8,newBA......
  • CSS选择器笔记
    [color=red][b]一、基本选择器[/b][/color][table]序号选择器含义|1.|*|通用元素选择器,匹配任何元素|2.|E|标签选择器,匹配所有使用E标签的元素|3.|.info|class选择器,匹配所有class属性中包含info的元素|4.|#footer|id选择器,匹配所有id属性等于footer的元素[/table]......
  • google gson学习
    [color=red][b]googlegson学习[/b][/color][url]http://lyking2001.iteye.com/blog/504156[/url]Gson网址http://code.google.com/p/google-gson/[b]1.简单的处理list和map[/b]Gsongson=newGson();ListtestList=newArrayList();testList.a......
  • dubbo源码学习(四)初始化过程细节:解析服务
    今天将真正去看dubbo内部的实现过程,看dubbo的源码前我先把dubbo的用户指南和开发指指南大概的看了一遍,这样再看dubbo源码比较轻松。从用户指南和开发指指南可以找到相应的切入点,今天将介绍的是dubbo的初始化解析bean的过程:解析服务基于dubbo.jar内的META......
  • dubbo源码学习(二) : spring 自定义标签
    做dubbo的配置时很容易发现,dubbo有一套自己的标签,提供给开发者配置,其实每一个标签对应着一个实体,在容器启动的时候,dubbo会对所有的配置进行解析然后将解析后的内容设置到实体里,最终dubbo会根据实体中的值生成贯穿全局的统一URL。利用自定义标签使配置简单明......
  • 极客时间--golang并发编程实战课--Mutex学习总结
    互斥锁的实现机制互斥锁是并发控制的一个手段,是为了避免竞争而建立的一种并发控制机制。在并发编程中,如果程序中的一部分会被并发访问或修改,那么,为了避免并发访问导致的意想不到的结果,这部分程序需要被保护起来,这部分被保护起来的程序,就叫做临界区。可以说,临界区就是一个被共......