css四种定位方式(css定位元素方法)
大家好，今天给各位分享css四种定位方式的一些知识，其中也会对css定位元素方法进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
CSS里的定位主要有几种方法
定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
css定位position的定位有哪些,有那么特点
有以下几种：
1、absolute：
生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
2、fixed：
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
3、relative：
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的 LEFT位置添加 20像素。
4、static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right或者 z-index声明）。
如何用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>
好了，文章到此结束，希望可以帮助到大家。