课程：

• 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中固定定位 静态定位是什么意思？

静态定位：

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top,bottom,left,right影响。

固定定位：

元素的位置相对于浏览器窗口是固定位置。

margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。  

图9中，使用margin属性布局相对定位元素。

层级关系为：

div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物

div—————————-没有设置为定位元素，不是参照物

div———————- position:relative 参照物

div box1

div box2 ——–position:absolute; top:50px; left:120px;

div box3

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

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

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

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

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

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

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

div 图片、文字 /div

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

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

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

position : static; /* 无定位 */

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

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

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

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

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

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

”