笔记7--CSS基础知识
来源:互联网 发布:mac 未能存储文稿 编辑:程序博客网 时间:2024/06/05 08:25
2.7定位
定位方式有:
static:静态的定位(默认)
无定位,元素正常出现了流中,不受left、right、top、bottom影响
fixed:固定定位
relative:相对定位
absolute:绝对定位
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
}
#div2{
width:200px;
height:200px;
background-color:greenyellow;
}
</style>
显示效果为:
代码:<styletype="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
position: fixed;
left:30px;
top:20px;
}
#div2{
width:200px;
height:200px;
background-color:greenyellow;
}
</style>
显示效果为:
从结果可以看出:fix定位会将元素从流中“摘”出来单独进行定位,其定位取决于left、top。
重新定位之后可能会出现重叠,通过z-index可以调整其顺序,但是定位z-index无效。
相对定位:
relative
代码如下:
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:rgba(255,0,0,1);
}
#div2{
width:200px;
height:200px;
background-color:greenyellow;
position:relative;
top:20px;
left:30px;
}
#div3{
width:100px;
height:100px;
background-color: blue;
}
</style>
结果如下:
从结果可以看出,相对定位是从原有位置进行位移,但是并不影响后续位置。
绝对定位:
Absolute
代码如下:
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:rgba(255,0,0,1);
}
#div2{
width:200px;
height:200px;
background-color:greenyellow;
position:fixed;
top:20px;
left:30px;
}
#div3{
width:100px;
height:100px;
background-color: blue;
}
</style>
结果如下:
从结果可以看出:绝对定位的元素将从流中被“摘”出来,依靠left top属性进行定位。
与fixed类似,但是参照物不同
fixed参照根元素(html)
absolute参照父容器
- 笔记7--CSS基础知识
- css基础知识学习笔记
- CSS基础知识学习笔记
- CSS学习笔记:基础知识
- css基础知识笔记整理
- 笔记4--CSS基础知识
- 笔记5--CSS基础知识
- 笔记6--CSS基础知识
- 笔记8--CSS基础知识
- 笔记9--CSS基础知识
- HTML/CSS基础知识学习笔记
- 基础知识--Css学习笔记(一)
- HTML学习笔记之CSS基础知识
- 一、HTML+CSS基础知识学习笔记
- CSS基础知识1(传智播客笔记)
- CSS基础知识-选择器(传智播客笔记)
- CSS学习笔记(一)--基础知识
- HTML+CSS+JS的基础知识笔记
- scikit-learn对天气数据进行回归分析
- mapbox for unity 再现真实地图
- [USACO1.1]Broken Necklace C++(错误1)
- SSL certification verify
- 唔,试一下用MarkDown写文章
- 笔记7--CSS基础知识
- 采用Vivado HLS为视频处理实现中值滤波器和排序网络
- java的插入排序
- Git-实战篇-三个区域和交互-命令行
- Jquery的城市联动
- 邻接表构建模板
- 作业7.17
- Jni内存释放
- Perf