web页面元素属性定位有哪些方法_css定位页面元素

目录：

• 1、CSS里的定位主要有几种方法？
• 2、怎么用CSS给网页中的元素（图片、文字等）定位？
• 3、如何利用css进行精准定位，求详细思路。
• 4、如何利用css实现网页元素精确定位的

CSS里的定位主要有几种方法？

定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。

只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。

扩展资料：

相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。

在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。

在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。

怎么用CSS给网页中的元素（图片、文字等）定位？

div 图片、文字 /div

一般我是同过 设置 padding（补白） margin（边距）等样式来在页面上排版，

有一些就是position 是在整个页面上定位

=================================

position : static; /* 无定位 */

position : relative; /* 依物件左上角为基准取相当位置 */

position : absolute; /* 依网页左上角为基准取绝对位置 */

position : fixed; /* 固定位置不受滚动条影响 */

===================================

设置了position属性 然后直接｛top:100px;｝还可以用margin-top:-100px;

margin在设置了position 后可以 为负值例如“-100px;

”

如何利用css进行精准定位，求详细思路。

relative定位(相对定位) position:relative;

相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。

absolute定位(绝对定位) position:absolute;

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。

如何利用css实现网页元素精确定位的

1、先进行全局定义。比如

*{margin:0; padding:0;}

body,div,input{margin:0; padding:0;}（还可以加别的元素进去），各浏览器的不同大部分也就是对于边距的解释不同。

2、实现效果的方法有很多，尽量用科学合理的方法。比如你的这个input，你是用input去贴合一整张大背景图片。但其实可以把你的这个图片中输入框的部分单独做成图片，然后在input的样式表里定义背景。这样就算input跑偏了，也不会出现你图中这样与背景图分离的情况。这种方法虽然繁琐一点，但在方法上却是科学合理的。图片体积也小了，浏览器解释起来也快一些。

3、代码科学规范。不同的写法可能会有不同的效果，也会造成元素移位。比如明明设置了margin-top:10px却不起作用，这就跟上下文的写法相关。这个具体要看情况，不好作出说明。自己摸索吧。

标签：css定位页面元素