position默认值表示什么_vue的生命周期

position默认值表示什么_vue的生命周期,第1张

position默认值表示什么_vue的生命周期 布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。

position属性有4个值:static、relative、absolute、fixed,默认值为static。

static :默认文档流,正常显示;relative:相对定位;absolute:绝对定位;fixed:固定定位。

HTML代码:<!DOCTYPE html><html><head><meta charset=”utf-8″><title>定位</title><script type=”text/javascript” src=”demo.js”></script><link rel=”stylesheet” type=”text/css” href=”demo.css”></head><body><p>1</p><p id=”p2″>2</p><p>3</p><p>4</p></body></html>css:*{margin: 0 ;padding: 0;}p{position: static;background: #ccc;margin-bottom: 15px;}#p2{position:relative;top: 20px;left: 20px;}1 将第二个p元素position属性设为(绝对定位) relative, 设置top和left值:图示:发现:第二个段落相对于原来的位置向下和右移动了20px。

结论:绝对定位的元素会相对于原来在文档流中的默认位置进行改变;并且这个元素不会影响其他元素,只是相对于自己原来的位置改变了。

PS:可以给top和left属性设定负值,把元素向上、向左移动。

2 将第二个p元素position的属性改为(相对定位)absolute,设置top和left值:图示:发现:第二个段落相对于浏览器窗口向下和右,移动了20px。

且原来的位置被占据了。

结论:相对定位默认以body为参照物进行定位;并且相对定位已经脱离文档流, margin-bottom: 15px ;失效。

PS:如果给父元素的position属性设置了relative,则以父元素为参照物。

如果父元素没有,则看父元素的父元素有没有,如果都没则以body为参照物。

3 将第二个段落position的属性改为(固定定位)fixed,设置top和left值:发现与绝对定位相似,实际上fixed表示固定在body的某个位置不随页面的滚动而改变。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/646230.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-17
下一篇 2022-04-17

发表评论

登录后才能评论

评论列表(0条)

保存