css top没有用,CSS top属性用法揭秘

最新推荐文章于 2023-06-23 23:10:43 发布
最新推荐文章于 2023-06-23 23:10:43 发布
阅读量596 收藏 1
点赞数 1
文章标签： css top没有用

你对CSS top 属性的用法是否了解，这里和大家分享一下，该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

CSS top 属性

定义和用法

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

注释：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

说明

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

144f5befa0056a26e134b20f071a12f5.png

实例

把图像的上边缘设置在其包含元素上边缘之下 5 像素高的位置：

img

{

position:absolute;

top:5px;

}

浏览器支持

所有主流浏览器都支持 top 属性。

注释：任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

0b7da963b184bc88fc58f0794f5cabc3.png

【编辑推荐】

【责任编辑：程华权 TEL：(010)68476606】

点赞 0

咪马3213m~~
关注
CSS笔记（CSS禅意花园+CSS揭秘）
Koweico的博客
09-17 817
关联css与html 通过id在head标签中一一设置 <style type=”text/css”> #id名字{ Color：red; } </style> 新建css文件，在head标签中关联 <link href="文件名.css" rel="stylesheet" type="text/css" /> Css文件中： #id名字{color:red;} 在每个标签内直接加入style=“color：red；……” 书写规则 选择器 {
CSS样式揭秘
Winsom1的博客
07-16 330
修改组件样式： 1.去背景：background:none； 2.去边框下划线：box-shadow: none; 3.去鼠标事件：cursor: default; 3.背景图片居中：background-position: center; 4.背景图片随边框变化：background-size: contain; 5.设置不重复背景图像（及如何重复）：background-repeat: no-.........
CSS百分比定义高度为什么没有效果
12-09
当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。 原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果： 父元素css： position: relative/absolute; left: 50%; 子元素css： position: relative; left: -50%; 但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式，我们可以这样解
css top没有用,css top不起作用怎么办
weixin_35882650的博客
08-03 1625
css top不起作用是因为“position”属性的值为“static”，那么设置“top”属性就不会产生任何效果，其解决办法就是确保position属性的值为absolute或者relative即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。css中top属性不起作用的解决：在CSS的定位中，有时使用top属性进行偏移时，却发现top属性...
css top没有用,问个关于CSS的问题。为毛margin-top没效果
weixin_36397509的博客
08-03 179
css* {margin: 0;padding:0;font-size:14px;border:0px;box-sizing:border-box;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;vertical-align: baseline;outline:none;}body,html {height:100%;width:1...
CSS属性！[全解析]
管子（zero）的杂乱空间
11-27 1175
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
CSS中position属性( absolute | relative | static | fixed )详解
热门推荐
雾里看花
04-07 9万+
我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，b
css揭秘--3灵活的背景定位
weixin_44580139的博客
11-26 266
灵活的背景定位 文章目录灵活的背景定位难题 难题 在针对容器的某个角对背景图片
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
weixin_29209805的博客
08-04 1448
百度前端技术学院2017于2月24日开始进行，一共有6个学院可供学习，分别是小薇学院(html/css基础)、斌斌学院(js基础)、耀耀学院(小游戏/交互)、商业平台学院(web/ios/android)、ECharts & WebVR学院(VR相关)和糯米学院(css3/vue等)，从百度前端技术学院今年推出的各学院任务看来，目前互联网行业对从事前端行业的程序员要求越发高了。任重而道远，...
提升网页设计：CSS样式表实用技巧揭秘
例如，将按钮的文本内容用背景图片替换，可以使用`content`伪元素和`background-image`属性实现。这样，对于不能显示图片的用户，仍然可以读取到文字内容。 6. 层叠与继承 理解CSS的层叠顺序（cascade）和继承...
CSS expression属性
weixin_30905981的博客
07-18 204
expression属性是在IE5版本之后支持使用的，用来把CSS属性和JavaScript脚本关联起来。简单粗暴的说，该属性是用来调用JavaScript代码的。 CSS属性后面是一段JavaScript代码，CSS的值是JavaScript表达式计算的结果。 给元素固有属性赋值 .box1{ position: absolute; top: expression(eval(do...
【css样式问题】position:absolute绝对定位中设置top的值为百分比不生效
前端代码小白的日常博客
11-30 2656
在解释这个问题之前，首先了解position的五个元素定位类型。
css的top和left属性不起作用
weixin_34248023的博客
07-27 1033
原文：http://blog.sina.com.cn/s/blog_95d938f30101mr1i.html 在实践的例子时，如下设置了top和left不起作用 $("myPanel").css({"top":"500px","left":"500px"}); 而当加入position：absolute时，效果正常; $("myPanel").css({"position":"a...
CSS中absolute定位时left，right，top，bottom不起作用
xw1193195009的博客
04-21 2802
CSS中absolute定位时left，right，top，bottom不起作用 今天在写样式的时候发现盒子内部使用absolute定位时，left：30%不起作用，经多次实验发现，原因是上层盒子定位问题，将上层盒子的定位改为relative即可。 ...
CSS定位简介
Huang_WeiHong的博客
07-19 802
CSS定位描述 相对定位 概念 让元素相对于自己原来的位置，进行位置调整，除了可以修改它的最终位置，可以与页面上的其他元素重叠 position: relative;<!-- 相对定位 --> top，bottom，left和right来精确指定要将定位元素移动到的位置，注意：top是从上往下移动，left是从左往右移动，这些属性值可以采用逻辑上期望的任何单位——px，mm，%等 特点 相对定位不脱离标准文档流 相对定位后的"盒子"相当于本体一个"影子"，可以在任何地方，但是本体还是位于标准文
【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系
最新发布
小秀的博客
06-23 2473
`top: 50%;` 和 `transform: translateY(-50%);`的区别和联系
margin-top导致子标签绑架父标签问题
pengzheng1985的专栏
06-21 2395
现象： 当两个空的块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）。 就好比一个小兵，看到上级有漏洞，就假传圣旨，利用漏洞扩张自己的权利。只要设置父元素的border（栅栏）或者padding（隔离墙），就能管住这个调皮的下属。 #parren
2021- 07-08 Day09CSS基础 第七天
weixin_49911270的博客
07-08 245
Day09-前端基础CSS第七天 学习目标： ​ 能够使用精灵图 ​ 能够使用字体图标 ​ 能够写出 CSS 三角 ​ 能够写出常见的 CSS 用户界面样式 ​ 能够说出常见的布局技巧 1. 精灵图（重点） 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 为什么使用精灵图（目的）： ​ 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵
web前端笔记:CSS top属性问题
Jiang216的博客
10-10 2557
首先需要搞清楚CSS的定位问题： CSS定位常用方式包括：1.absolute绝对定位，其绝对的意思为相对于最邻近的非static定位祖先进行定位。而非static定位的意思即在CSS属性中对position属性进行了定义（包括absolute,relative）。2.relative相对定位，即相对于其父元素进行定位。3.fixed固定定位，即相对于浏览器窗口进行固定定位，上下拖动进度条均不会影
揭秘CSS margin属性的使用技巧和注意事项
本文将详细介绍 CSS 中 margin 属性的使用，着重描述关于 margin 的一些不太容易发现的“坑”。 一、盒模型 在 CSS 中，每个元素都可以看作是一个盒子，盒模型（Box Model）是 CSS 布局的基础。盒模型由内容边缘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值