1. 新行网首页
  2. 投稿

position默认值表示什么（vue的生命周期）

• 投稿 • 阅读 24

布局的核心是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值：

图示：

position默认值表示什么（vue的生命周期）

发现：第二个段落相对于原来的位置向下和右移动了20px。

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

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

2 将第二个p元素position的属性改为（相对定位）absolute，设置top和left值：

图示：

position默认值表示什么（vue的生命周期）

发现：第二个段落相对于浏览器窗口向下和右，移动了20px。且原来的位置被占据了。

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

PS：如果给父元素的position属性设置了relative，则以父元素为参照物。如果父元素没有，则看父元素的父元素有没有，如果都没则以body为参照物。

3 将第二个段落position的属性改为（固定定位）fixed，设置top和left值：

发现与绝对定位相似，实际上fixed表示固定在body的某个位置不随页面的滚动而改变。

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/74404.html

赞 (0)
上一篇 2024年11月16日 01:47:01
下一篇 2024年11月16日 01:53:38

相关推荐