栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

css的三种定位方式使用探讨

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。

默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float

具体实例

复制代码代码如下:


<br />css定位功能探索 <br />

#relative{

position: relative;
top: -10px;
left: 30px;
color: red;
}

#absolute1{
position: absolute;
top: 20px;
left: 360px;
color: blue;
}

#absolute2{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}

#absolute3{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}

#fixed{
position: fixed;
top: 90px;
left: 80px;
}

#float1{
float: left;
margin-left: 50px;
}
#float2{
float: left;
margin-left: 50px;
}




position 值为relative 定位探索1


position 值为relative 定位探索2


position 值为absolute 定位探索3


position 值为absolute 定位探索4


这是position 值为absolute 定位探索4和5的父元素

position 值为absolute 定位探索4


position 值为absolute 定位探索5



这是position 值为absolute 定位探索6和7的父元素

position 值为absolute 定位探索6


position 值为absolute 定位探索7



这是position值为fixed 定位探索1


这是position值为fixed 定位探索2

这是一个普通定位1
这是float定位1
这是float定位2
这是一个普通定位2



运行效果:
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/217453.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号