【前言】
一周过去了，转来转去！
【小知识】
-定位网页元素
一、position属性
1.static：默认值，没有定位
2.relative：相对定位 偏移设置：left、right、top、bottom
3.absolute：绝对定位
4.fixed：固定定位
【实例】
1.relative：相对定位
<style>
div:{
width:20px;height:200px
}
#top{
background:red
}
#middle{
background:blue;
margin-top:-50ox;
margin-left:60px
}
#bottom{
background:yellow
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div
</body>
浏览器显示如下：
注：若想更改图片上下位置，需将要更改位置的图片进行position的定位，在加入z-index的设置，范围为1-1000
2.absolute：绝对定位
3.fixed：固定定位
<style>d
.menu{
width:30px;
postition:fixe;
left:50px;
top:200px
}
</style>
</head>
<body>
<div class="menu">
aa<br>
bb<br>
<div>
<p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p>
<p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p>
<p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p><p>ccc</p>
</body>浏览器显示如下：
这时就会发现不管怎么拖动滑动条，aa和bb都不动，这就是所设了固定定位
二、z-index属性
三、网页元素透明度：opacity
浮动
内容溢出（overflow属性）
1.visible：默认值，内容不会被修剪，会呈现在盒子之外
2.hidden：内容会被修剪，并且其余内容是不可见的
3.scroll：滚动条显示
4.auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
【举例】
<style>d
div{
width:30px;
height:30px;
background:red;
overflow:scroll
}
</style>
</head>
<body>
<div class="content">那人却在灯火阑珊处<div>
</body>浏览器显示如下：
