浮动:float
<body> <div class="menu">栏目一</div> <div class="menu xian">栏目二</div> <div class="menu">栏目三</div> <div class="title">这是<span>一</span>条新闻标题</div> </body> .menu { border: 3px solid red; float: left; //添加左浮动 //clear:left(清除浮动) }
展示效果:
定位:position
position 属性的五个值:
static:没有定位,遵循正常的文档流对象
relative:相对定位,相对于原来的位置偏离了多少
fixed:元素的位置相对于浏览器窗口是固定位置。
absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
sticky:定位的元素和其他元素重叠
相对定位: