关于position的一些问题

时间：2018-09-25 23:04:22 阅读：176 评论：0 收藏：0 [点我收藏+]

标签：display type round view yellow idt 滚动 initial class

position属性：
  static:静止
  relative：相对的
  fixed：固定的
  absolu：绝对的

position的一些实例子如下：

HTML：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div class="box" id="three">Three</div>

</body>

</html>

CSS:

.box {

display: inline-block;/*直接让块元素设置为内联对象*/

width: 100px;

height: 100px;

background: red;

color: white;

}

#one{

position: static;

}

#two {

position: relative;/*relative的位置是基于原来的位置*/

top: 1000px;

left: 20px;

background: blue;

}

#three{

position: fixed;/* fixed简单描述：固定定位是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化；

注意：固定定位的位置是相对于前一个位置的；*/

top: 200px;

left: 500px;

background: yellow;

}

#four{

position: absolute;/*absolute相对于前一个位置的*/

top: 20px;

left: 700px;

}

关于position的一些问题

标签：display type round view yellow idt 滚动 initial class

原文地址：https://www.cnblogs.com/gogogoing/p/9703880.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行