![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
注意，'top','right','bottom','left'这四个属性对于static定位的元素无效。因此，我们说top等的含义时，就是在讲这些属性在相对定位和绝对定位下的含义。
绝对定位下，这四个属性的含义就很不一样了。
这里要解释一下俩个概念：top margin边 和包含块的概念。
我们都知道，每个盒子都由内容、内边距、边框和外边距组成。外边距区域最顶部的位置就是top margin 边，最底部的位置就是bottom margin边。
包含块的概念：元素盒子的位置和大小有时是根据一个特定矩形计算的，叫做该元素的包含块。
对于绝对定位的元素，它的包含块就是由最近的已经定位的祖先元素创建。如果没有这样的祖先，包含块就是根元素所在的包含块。
top：距离顶部的距离。
left：距离左侧的距离。
css的left和top属性：指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。
left和top的使用必须伴随设置 position ： relative或者absolute；css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离。
所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。
扩展资料
在CSS中，有auto值，它可以用于像margin，position，height，width等属性。
auto关键字的使用因属性而异。对于本文，我将在每个属性的上下文中解释值。
width: auto块级元素(如<div>或<p>)的初始宽度是auto，这使得它们占据了包含它们的块的整个水平空间。当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。其中 content 的宽度将是content本身减去margin、padding和border。
【position:absolute】意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。
绝对定位具有以下属性：（下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的盒子）。
如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
其实用postion: fixed并不是很方便，用position: sticky会更容易达到我们的目的。只需要给头部设置：
即可。
将position设置为sticky，那么头部组件还会占有着上方空间，所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性，那么body下面的组件也要算出导航栏的长度，再设置top属性，这样一来就麻烦了很多
