当图片在页面对象中进行放置时，总是需要对图片的位置进行定位，图片定位主要通过两种方式，一种是使用margin进行外边距控制达到定位效果，另一种是通过top及right属性进行图片位置的相对定位。在本章有关横向导航的设计之中，在导航条之上，有一张网站LOGO的图片还没有被放置，而且在目前导航的设计中，由于顶部是一块方块状背景，使用了一个单独的div对象，因此LOGO图片为了达到设计稿中的效果，必须同导航一样，放置在di对象之中，并通过定位才能够达到需要的效果。我们在导航代码中插入LOGO图片，再进行下一步厅位置上的控制：可以看到，图片在默认情况下被放置到了对象的左上角，但是却引发了另一个问题，由于图片具有高度，并占据了整个div中的一部分空间，因此在它下面的ul元素的上述边距发生了变化。上边距变成了目前的设置加上图片的高度。为了解决这个问题，天津网站优化，首先应当改变图片在对象中的浮动方式。天津网站建设
float:left，同前例中的其他元素一样，对象发生浮动，右侧对象向排列在了其右、解决了当前的问题。不过需要值得注意的是…目前可以解决这个问题，主要源于图片与ul列表的宽度没有超过整个div的宽度，使得两个元素可以浮动在一行之中，如果图片的宽度加上的宽度超出了整个div的宽度，那么就有必要改变ul的上边距数值了。对于对象而言，实际上目前图片与ul是在一行之中，而如果二者的宽度超过div的宽度的话，因为宽度限制实际就成为了两行。天津网站制作
目前的LOG0已经通过margin改变了在对象中的位置。前面我们提到过，如果LLOGO与ul的宽度超过对象的宽度，就会导致换行，事实上在设置中，margin也有可能造成对象宽度的增加，margin-left: 10px;对于对象而言，实际上使得对象的占位宽了lOpx，如果将lopx改为20或30，就极有可能让叫再次被挤到下一行。为什么margin会占实际空间呢？有关 margin的问题在本书的CSS高级技巧中的盒模型问题上将详细谈到。但是有没有办法让图鱼片定位到想去的地方，而不影响别的元素呢？如果是这样的话，我们就有必要使用另一种图图片位方式—相对定位，改进后的CSS代码如下，为了便于理解相对定位与ms昭in的我们将图片的位移稍多了一些。天津做网站
使用top及left属性，必须先启动相对定位属性，即position:relative;‘如果使用relative，即相对定位，对象还是会放置在当前对象之中，所不同的是，如果时使用top,leil的话，所指的top值是相对于他的上一级对象而言，在本例中就是相对于div行相对定位。使用position之后；对象的大小还是同以前一样，只不过实际位置发生了变化,这是与margin所不同的，margin设置使得对象的边距成为了对象的一部分，无形中扩大了对象占有容器的区域。当然，如果图片本身的宽度和高度超过范围的话，使用position也是不能改受的，这个时候只能修改ul的margin数值了。