html有几种定位方式,html几种定位方式分享

摘要：

下文讲述html使用css的几种定位方式简介说明，如下例所示；

实现思路:

使用position:relative实现相对定位

使用position:absolute实现绝对定位

使用position:fixed实现固定定位

例:

*{padding:0;margin:0;color:white;}

.s{width:320px;height:320px;background-color:green;}

.relative{margin:40px 40px;width:180px;height:180px;position:relative;top:30px;background-color:blue;}

.absolute{position:absolute;top:0;left:0;width:110px;height:110px;background-color:yellow;}

.fixed{position:fixed;top:0;left:0;width:110px;height:110px;background-color:black;}

默认定位

相对定位-blue

绝对定位-yellow

固定定位-fixed

css实现定位的几种方式示例分享