从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要为大家展示了“CSS定位、CSS的position属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS定位、CSS的position属性怎么用”这篇文章吧。
10年积累的成都网站建设、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有邓州免费网站建设让你可以放心的选择与我们合作。
布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed,默认值为static。
static :默认文档流,正常显示;relative:相对定位;absolute:绝对定位;fixed:固定定位。
HTML代码:
1
2
3
4
css:
*{
margin: 0 ;
padding: 0;
}
p{
position: static;
background: #ccc;
margin-bottom: 15px;
}
#p2{
position:relative;
top: 20px;
left: 20px;
}
1 将第二个p元素position属性设为(绝对定位) relative, 设置top和left值:
图示:
发现:第二个段落相对于原来的位置向下和右移动了20px。
结论:绝对定位的元素会相对于原来在文档流中的默认位置进行改变;并且这个元素不会影响其他元素,只是相对于自己原来的位置改变了。
PS:可以给top和left属性设定负值,把元素向上、向左移动。
2 将第二个p元素position的属性改为(相对定位)absolute,设置top和left值:
发现:第二个段落相对于浏览器窗口向下和右,移动了20px。且原来的位置被占据了。
结论:相对定位默认以body为参照物进行定位;并且相对定位已经脱离文档流, margin-bottom: 15px ;失效。
PS:如果给父元素的position属性设置了relative,则以父元素为参照物。如果父元素没有,则看父元素的父元素有没有,如果都没则以body为参照物。
3 将第二个段落position的属性改为(固定定位)fixed,设置top和left值:
发现与绝对定位相似,实际上fixed表示固定在body的某个位置不随页面的滚动而改变。
以上是“CSS定位、CSS的position属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图