CSS3：Left 和 Top 的使用

最新推荐文章于 2025-10-07 21:15:35 发布
原创 最新推荐文章于 2025-10-07 21:15:35 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文详细介绍了如何使用CSS的left和top属性来实现元素的精确位置控制。重点讲解了这些属性依赖于父元素的position属性（relative或absolute），并强调了正确设置position属性的重要性。

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

top:距离顶部的距离

left:距离左侧的距离

可视化系列讲解：css3D：如何绘制正方体，长方体等
wangyuiba1314的博客
12-31 2900
前端可视化系列讲解：css3D，svg，canvas等
CSS进阶：用html标签和CSS3写一个手机出来
we
07-19 3749
其中before是一个内边框，它的宽和高都要比上一步的总体宽（400+40px左右边框）和高都要少一些，所以我这里设置的是宽421px，高815px，圆角也要设置的小一点，重点在要给它定义一个box-shadow增加一个阴影效果。比如我在后面继续画了，联通信号，wifi，电池等等图标，再加上时间效果，后面还可以直接做一个pc版本的手机网站。，定义一个类.box，高宽定义后，一定要写一个像素的边框，颜色调整深一点，box-shadow起到的作用是将周围的颜色更加柔和自然一点。源码已打包下载地址。...
CSS中的top和left
Android探索之路
09-03 3589
在编写CSS中如果总是设计到定位，那么肯定会用到top left，当然还有两个right和bottom。经常用到的人会觉得这两个属性很简单没必要谈，但我还是来说说我的心得。 关于top和left 这四个属性是设置一个偏移量，对于特定容器的一个偏移。top是指元素的顶边相对于容器的顶边的偏移，right是元素的右边相对于容器的右边的便宜，但方向是从右到左。正因为有方向，所以这四个属性也可以设置为
css属性left、right、top、bottom
oatmeal2015的博客
09-13 8545
css：left属性 浏览器支持 所有主流浏览器都支持 left 属性。 定义和用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 注释：如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。 说明 对于 static 元素，为 auto；对于
10.7（CSS）
最新发布
lihuihtl的博客
10-07 531
2 脱离文档流的元素，包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)】作用:浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，(伸缩项目的宽或高)1 发生固定定位、绝对定位后，元素变成了定位元素，默认宽高被内容撑开，依然可以设置宽高。定义伸缩项目的放大比例，默认为0，即:纵使主轴存在剩余空间，也不拉伸(放大)值分别为:1、2、3，则:分别瓜分到:1/6、2/6、3/6 的空间。定义了项目的压缩比例，默认为1，即:如果空间不足，该项目将会缩小。
java topleft_jQuery / CSS - 使用left / top重新定位相对DIV
weixin_31580797的博客
02-16 212
我有一个属性为“Position：relative;”的DIV . 现在，这些DIV中有三个 . 他们都获得了一个独特的ID等 .现在，如果我单击DIV，我希望它能够动画到文档中的某个位置 . 虽然我无法确定左/上值，因为如果我使用“top”和“left”，它会相对地将左侧设置为其父项位置 .也许有点不清楚，但这是我得到的 .将移动的可点击DIV的CSS .div#left_hldr .switc...
CSS中top和left的使用场景
TSeven37的博客
07-24 3024
left和top的使用必须设置 ； position：relative； || position：absolute css的left和top属性： 指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置po...
css3定位属性：top，bottom，left，right
weixin_43294750的博客
03-19 3357
css3定位属性 top，bottom，left，right 取值：auto，， 默认值：auto 继承性：无 说明 定义了元素的上外边距边界（外margin）与其包含块上边界（外padding）之间的偏移距离，取值可以为负值； <!doctype html> <html> <head> <meta charset="utf-8"> <...
精选资源
纯css3信封爱心封口动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个具有信封爱心封口动画特效的交互式设计。CSS3（层叠样式表第三版）是Web设计中的一个重要工具，它为开发者提供了丰富的样式控制和动态效果，使得网页设计更加生动和...
CSS教程：简化CSS中属性的示例
01-21
在工作中编写CSS代码时，经常会出现冗余的代码，特别是用“可见即可得”工具来编写，为了提高代码的质量及文件压缩到最小，使代码具有可读性，我们不得不把CSS代码简化。 下面用一些比较常用的属性来做示例： ...
CSS3教程(2):网页边框半径和网页圆角
12-09
在CSS3中，网页设计者可以使用`border-radius`属性轻松地为元素添加圆角，从而解决了以往通过切图和复杂CSS布局实现圆角的繁琐问题。本教程将详细介绍如何利用CSS3的`border-radius`属性来创建网页边框的圆角效果，...
css 布局 width hight top left right bottom
11-03 465
       ----铺满---      width:100%;     height:100%; ----靠右--  right:0;   ----靠下--  bottom:0;  
css中 top, right, bottom, left设置为0有什么用？css中，width: 100% 和 width: auto的区别？
热门推荐
EmotionComputer
10-07 1万+
一. 引言 当我们使用position属性时，总免不了与top，left，right，bottom四个属性打交道，那么这四 个属性都设置为0时有什么用，与宽高设置100%又有什么区别？本文对此展开讨论。 二. 关于top left right bottom position定位属性大家都不会陌生，添加position属性的元素可以定位，而top，left，right， bottom属性决定元素定位...
DIV CSS left right top bottom定位
sinolzeng的专栏
11-15 1971
这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。
CSS——top和margin-top
chengzhangdewo的博客
10-12 602
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。 2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。 ...
css top 定位百分比,关于css position定位 top百分比的问题
weixin_42588877的博客
08-03 1040
css设置绝对定位后 top,bottom,设置百分比定位是按父元素的高度来计算的，同样left,right,设置百分比定位是按父元素的宽度度来计算的.box{ background: #66E6FF; width: 100%; height:400px; position: relative; margin: 0 auto; }.pox{ background: #f0f; width:100...
几个left,top的解释
凤舞九天
01-20 503
1.clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,他的值就是0. 2.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素. 对于不可以滚动的元素,这些值总是0. 4.style.left: ...
浮动 精灵图 css定位
x0572_的博客
07-21 1113
浮动特性，精灵图，CSS定位
CSS基础语法（一）
m0_54435916的博客
08-22 336
行内样式、内部样式、外部样式、选择器、伪类样式、显示样式、列表样式
css transition: left .5s linear,top .5s linear; 不简写
09-13
`css transition: left .5s linear,top .5s linear;` 这段代码是用于设置CSS过渡效果的，它定义了当元素的`left`和`top`属性发生变化时，如何以及以何种速度进行过渡。详细解释如下： - `left`和`top`分别指定了元素在水平和垂直方向上偏移的位置。 - `.5s`表示过渡效果持续的时间，单位是秒，这里设置为0.5秒。 - `linear`指定了过渡效果的速度曲线，这里表示过渡过程将保持匀速，没有任何加速或减速。 这段代码并没有使用简写形式，通常简写形式会将多个过渡属性写在一行中，例如： ```css transition: property duration timing-function delay; ``` 其中： - `property` 是指要应用过渡效果的CSS属性名称。 - `duration` 是过渡效果持续的时间。 - `timing-function` 是过渡效果的速度曲线。 - `delay` 是过渡效果开始之前的延迟时间。 不简写的写法是将每个属性单独设置，这样做可以更细致地控制不同的属性过渡效果，可以对不同的属性应用不同的持续时间和速度曲线。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值