css 中left 和top 有什么用

Question

css 中left 和top 有什么用

Answer 1

top：距离顶部的距离。

left：距离左侧的距离。

css的left和top属性：指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。

left和top的使用必须伴随设置 position ： relative或者absolute；css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离。

所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。

扩展资料

在CSS中，有auto值，它可以用于像margin，position，height，width等属性。

auto关键字的使用因属性而异。对于本文，我将在每个属性的上下文中解释值。

width: auto块级元素(如<div>或<p>)的初始宽度是auto，这使得它们占据了包含它们的块的整个水平空间。当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。其中 content 的宽度将是content本身减去margin、padding和border。

【position:absolute】意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。

绝对定位具有以下属性：（下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的盒子）。

如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。

Answer 2

position：absolute； //这个是必须的，top和left才能起作用
top: 10px; //距离顶部10像素，就是想下面移动10像素
left: 10px; //同理，是左边

absolute是基于整个屏幕

它的父级元素如果设置 relative ,那就就是基于它的父元素的左上角计算

w3school.com.cn 有什么不懂，应该先查手册本回答被提问者采纳

Answer 3

left 和 top 只有在定位元素上才会起作用。
定位：
position：static | relative | absolute | fixed
默认值：static
适用于：除display属性定义为table-column-group | table-column之外的所有元素。
static：
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
当元素定位后，left就是修改到定位父级左边的距离，top就是修改到定位父级顶部的距离。

Answer 4

.class{position: absolute;left: 0px;top: 0px;}
.class{position: fixed;left: 0px;top: 0px;}

在CSS中，left和top是元素在定位状态下用来定位坐标的样式，其中left代表左边的位置，top代表上面的位置。

Answer 5

在CSS中，left和top是元素处于定位状态下的时候，用来定位位置的样式，left是左边的位置，top是顶部的位置，

.class{position: absolute;left: 0px;top: 0px;}
.class{position: fixed;left: 0px;top: 0px;}