css学习笔记之定位3.6_css三种定位

文章导读:

• 1、css定位大全
• 2、CSS定位问题？
• 3、css中定位的三种方式
• 4、CSS 中定位方式有几种，说明他们的意义
• 5、如何利用css进行精准定位，求详细思路。

css定位大全

css定位大全如下：

1、相对定位 - relative

使用相对定位的盒子，会相对它原来应该在的位置进行偏移，偏移到指定的位置；

使用相对定位的盒子仍然在标准流中，它对父盒子和兄弟盒子没有任何的影响。

2、绝对定位 - absolute

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位；

绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

3、静态定位 -

static

默认值，基本不需要关注

4、固定定位 - fixed

它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变

CSS定位问题？

加float:right;不是可以的吗？

如果不用float的话css可以修改成下面这样。也就是用绝对定位，注意使用绝对定位一定要确定是相对于谁定位，默认情况下它是相对于浏览器文档定位，除非包裹他的父元素有relative的，那么它会就近相对于position:absolute;的父元素来定位。不过注意需要加上display:inline-block;不然会窜到下一行的。

style type="text/css"

td{position:relative;}

.day {color: #CD25C2;

position:absolute;

right: 5px;

text-shadow: 2px 2px 2px red;

font-weight: bold;

display:inline-block;

}

/style

css中定位的三种方式

第一种：固定定位

第二种：绝对定位

第三种：相对定位

CSS 中定位方式有几种，说明他们的意义

大概是四种：

position: fixed;（固定）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

position: absolute;（绝对）

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

position: relative;（相对）

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

position: static;（静态）

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

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

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

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

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

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

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