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

html-css08

CSS里的定位主要有几种方法?,第1张

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

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

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

扩展资料:

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

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

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

     Css的定位机制分为普通流(文档流)、浮动(float)、定位(position)其中普通流就是文档流,在Html中的写法是从上到下,从左到右的排版布局,其中块级元素独占一行,而内联元素不独占一行。对于文档流来说它的默认position是static就是没有定位。

      position规定元素的定位类型,任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不管该元素本身是个什么类型,相对元素会相对与它的正常流的默认位置作出偏移。具体:static,position的默认值,表示没有定位,忽略top,left,bottom,right和z-index的影响;absolute,生成绝对定位元素,相对于static定位之外的第一个父元素进行定位,元素位置通过left,top,bottom,right设置;fixed,生成绝对定位元素,相对于浏览器窗口进行定位,通过left,top,bottom,right设置;relative,生成相对定位元素,相对于其正常文档流中的位置进行定位,通过left,top,botton,right设置(注意相对正常位置);inherit规定应该从父元素处继承position属性。

       浮动模型是一种可视化格式模型,浮动的框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动元素的边框,如果包含的框中没有足够的宽度容纳浮动元素那么多余的就会下移。浮动元素不在文档的普通流中,就好比浮动元素在文档流中不存在似的。

       从上面我们知道,被设置了absolute的元素或者float的元素都会脱离文档流,虽然正常的显示还在,但是它其实不占文档流中的空间位置。在float脱离文档流的时候虽然其他盒子无视他,但盒子中的文本围绕它,而absolute脱离文档流会造成其他盒子和盒子的文本都会无视他。

CSS表单文本框的位置,首先我们需要看要求放置的位置,这里我们需要使用的是css的position的定位属性,一般是使用绝对定位,这里我们可以举个例子来体现:

<html>

<head>

<style>

input{

width:200px 

height:30px

position:absoulte

left:300px           //这里假定的值,具体应用需要测量

top:200px 

}

</style>

</head>

<body>

我的名字:<input type='text'>

</body>

</html>