css定位？css四种定位方式
其实css定位的问题并不复杂，但是又很多的朋友都不太了解css四种定位方式，因此呢，今天小编就来为大家分享css定位的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
如何用css精确定位小图片的位置
如何用css精确定位小图片的位置
首先设置固定图片的css属性是background-attachment
background-attachment它有两个属性值fixed/scroll
background-attachment：fixed;表示固定图片，图片不随着页面滚动而滚动。
background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动
background-position这个属性用来定位图片的位置。
我们重点给大家分享background-position这个属性
2background-position;的语法结构，用水平和垂直位置进行定位。
background-position:x y;
其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；
y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；
两个属性值得中间一定要用英文的空格，隔开。
代码如下：
<style type="text/css">
<!--
#img{
background-image:url("图片存放路径");/*插入背景图*/
background-repeat:no-repeat;/*设置图片不重复*/
background-color:#00ffff;/*设置背景颜色*/
background-position:left center;/*用居中对齐设置水平距离，用下面对齐设置垂直距离*/
width:400px; height:150px;/*设置宽度和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左边距离上边距离。这个用来找图片。
比如一张大图上面有很多小图，你只想用到其中一个小图就用这个找。
代码如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("图片存放路径");/*插入背景图*/
background-repeat:no-repeat;/*设置图片不重复*/
background-color:#00ffff;/*设置背景颜色*/
background-position:60px 50px;/*设置水平距离和垂直距离*/
width:400px; height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
css中的绝对定位和相对定位
关于position属性
position
开放分类： HTML、CSS、WEB标准、网页设计
bottom right top z-index left
position版本：CSS2兼容性：IE4+ NS4+继承性：无
语法：
position: static| absolute| fixed| relative
取值：
static：默认值。无特殊定位，对象遵循HTML定位规则
absolute：将对象从文档流中拖出，使用 left， right， top， bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。而其层叠通过 z-index属性定义
fixed：未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative：对象不可层叠，但将依据 left， right， top， bottom等属性在正常文档流中偏移位置
说明：
检索对象的定位方式。
设置此属性值为 absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin)，但仍有内补丁( padding)和边框( border)。
要激活对象的绝对(absolute)定位，必须指定 left， right， top， bottom属性中的至少一个，并且设置此属性值为 absolute。否则上述属性会使用他们的默认值 auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div对象的 height和 position属性，则 div对象的内容将决定它的宽度( width)。
此属性对于 currentStyle对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position。
示例：div{ position:relative; top:-3px}
css绝对定位和相对定位的区别
一：绝对定位
position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
#box_relative{
position: absolute;
left: 30px;
top: 20px;
}
二：相对定位
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative{
position: relative;
left: 30px;
top: 20px;
}
注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline;来解决的。
position:relative不会隐式改变display的类型。
css定位和css四种定位方式的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！