设置按钮的父级元素为相对定位,设置按钮本身为绝对定位,利用定位控制按钮的位置!例如:
1、html的结构如下,设置按钮btn1和父级标签wrap
2、css样式如下:
.wrap设置为相对relative, btn1设置为绝对absolute 以及控制他left的值和top的值
3、运行效果如下:
效果解读:
效果如下:
有两种方法来:
方法一:绝对定位布局,利用定位,可以将按钮放到任意位置
1)将包含按钮的父级标签设置为相对定位
.d2{
width:500px
height:300px
background:#660099
position:relative/*设置源相对定位*/
}
2)将按钮设置为绝对定位,百设置左边的距离,顶部的距离
.btn2{
background:#99ff00
position:absolute
left:100px
top:120px
}
3)运行查看结果:度按钮02 离左边100px ,顶部120px
方法二:浮动定位,利用设置按钮为浮动,缺点是不能很精确的定位到某个位置
1)代码如下:利用float:right 设置靠右
2)运行结果如下:
总结:如果需要定位到某个精确的位置,采用定位布局,即方法一