|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你可以轻松地控制页面的布局。
在CSS中有如许的一个指令:(position),在Dreamweaver中文版中翻译为“定位”,经常使用的属性有两个:relative(绝对)与absolute(相对)。有良多伴侣对这条指令的用法仍是不分明,这里做一些仔细的解说。
position:relative;暗示绝对定位,被定位了这个属性的标签在所属的局限内能够举行高低摆布的移,这里的挪动与padding或是margin所发生的地位变更是纷歧样的。padding与margin是元素自己的一种边距与添补间隔并非真实的挪动,而被界说为relative的元素是真实的挪动,这所发生的挪动间隔是从margin的核心到父级标签内侧之间这一段。
position:absolute;暗示相对定位,假如界说了这个属性的元素,其地位将根据扫瞄器左上角的0点入手下手盘算,而且是浮动一般元素之上的。那末当你必要某个元素定位在扫瞄器内容区的某个中央就能够用到这个属性。
因而发生了一个成绩:如今人人做的网页年夜部分是居中的,假如我必要这个元素随着网页中的某个元素地位,不管屏幕的分辩率是几它的地位一直是针对页内的某个元素的,靠纯真的absolute是不可的。
准确的办理办法是:在元素的父级元素界说为position:relative;(这里能够是祖父级,也能够是position:absolute;,多感谢old9的提出)必要相对定位的元素设为position:absolute;
如许再设定top,right,bottom,left的值就能够了,如许其定位的参照尺度就是父级的左上角padding的左上侧
</p>
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。 |
|