CSS 定位 (Positioning)

最新推荐文章于 2024-06-12 11:03:19 发布
最新推荐文章于 2024-06-12 11:03:19 发布
阅读量63 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57762660/article/details/121010136
版权

1.本例演示如何相对于一个元素的正常位置来对其定位。

2.把下面图片中的代码打出来

 

 

相对定位会按照元素的原始位置对该元素进行移动比如，样式 "left:-20px" 从元素的原始左侧位置减去 20 像素，样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

效果图如下

 

 

3.本例演示如何使用绝对值来对元素进行定位。

4.把下面图片中的代码打出来

 

通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。

效果图如下

 

5.本例演示如何相对于浏览器窗口来对元素进行定位。

6.把下面图片中的代码打出来

 

效果图如下

 

weixin_57762660
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS Positioning页面
凤凰涅磐，做不老的程序员
10-16 97
http://www.barelyfitz.com/projects/ http://www.barelyfitz.com/screencast/ http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
CSS positioning (定位)
liboy0001的博客
07-01 35
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于页面。静态定位的元素不会受到 top, bottom, left, right 影响。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。HTML 元素的默认值，即没有定位，元素出现在正常的流中。元素的定位与标准流无关，所以它们可以覆盖页面上的其它元素。相对定位元素经常被用来作为绝对定位元素的容器块。元素的位置相对于浏览器窗口是固定位置。固定定位脱离的标准流 不占位置。相对定位只适合小范围移动。
CSS Positioning(定位)
Vipwxs的博客
01-11 316
CSS Positioning(定位)： position 属性指定了元素的定位类型。 position 属性的四个值： static relative fixed absolute 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static 定位
CSS定位(Positioning)
weixin_30537451的博客
10-08 89
CSS position 属性 position 属性值的含义： static　　元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative　　元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute　　元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。...
CSS定位（Positioning）概述 绝对定位相对定位
m0_51701478的博客
12-25 309
CSS定位（Positioning）概述 CSS包括相对定位和绝对定位 1，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 例： #Box{ position:relative; top:50px； } 这样的话Box是在原来的基础上整体向上移动50px，是相对于自己原来的位置移动 2，绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的
css-positioning:2015 年 CSS 定位技术的高级概述
05-31
CSS 定位 2015 年 CSS 定位技术的高级概述。 最重要的课题。 无处不在：布局、菜单、表单…… 错误选择后重新开发的成本很高。 公认的解决方案必须是响应友好的。 负保证金 -没有React 绝对位置 -没有兄弟姐妹的...
css-layout-and-positioning-css布局与定位
03-26
css布局与定位
css-positioning:为简单起见，使用 react 构建的常见 css 定位方法教程
07-24
css定位 为简单起见，使用 react 构建的常见 css 定位方法教程。 此 repo 旨在用作现场演示和概念证明。 npx create-react-app 生成的自述文件： 创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录...
css-layout-positioning-08:CSS 定位
07-20
CSS 定位 目标 在课程结束时，学生应该能够： 使用边距和填充在元素内部和外部建立间距。 解释网页中不同类型的距离测量之间的区别，包括'px'、'%'和'em'。 使用 'float' 和 'clear' 将元素并排堆叠。 解释...
css-positioning:在CSS中练习定位的一系列分类挑战
04-29
在CSS中练习定位的一系列分类挑战 我该如何练习？ 1.首先，在系统上克隆存储库 git clone https://github.com/juniorcoders-ir/css-positioning.git 2.代码，实践：）
CSS 定位 (Positioning)浅析
程序媛
05-12 387
position的四个属性值： relative 相对定位 absolute 绝对定位 fixed 固定定位 static 静态定位 下面分别讲述这四个属性。 sub1 sub2 1. relative relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个r
CSS positioning的一些整理
Neverbelazy
01-25 553
CSS基础 1. 关联一个css样式文件 -rel : relationship css和当前的关系 是 样式文档 -type: text/css 关联文件的类型 -href: 这个link的 地址 2. 理解样式的继承关系 子元素样式自动继承父元素样式 可以复写子元素的样式 body { background-color : red; } p { ba
[转]关于position 的 static、relative、absolute、fixed、inherit
weixin_34112030的博客
01-26 113
本文转自：http://www.56770.com/faq/list/?id=410 position 有五个值：static、relative、absolute、fixed、inherit。 static 是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定 position，也就表示使用 static。 relative 没有脱离布局流，此时可以使用 to...
太原理工web课程答案——web程序设计课程答案 （第八章 CSS3页面布局）持续发布中——
weixin_51538341的博客
12-23 3385
8.1.2 1【单选题】 在CSS中，为页面中的某个DIV标签设置样式div{width:200px;padding:0 20px;border:5px；}，则该标签的实际宽度为（ ） A、 200px B、 220px C、 240px D、 250px 我的答案：D 2【单选题】 下列设置“上边距：20px、下边距：30px、左边距：40px、右边距：50px”边距属性正确的是（ ）。 A、 margin:20px 30px 40px 50...
内元素宽度设为100%为什么会超出外元素
大华阿大华的博客
10-14 4908
前言 一个元素(外元素)嵌套着另一个元素(内元素)，外元素固定宽度，内元素宽度设置为 100%，但是内元素却溢出了，如图： 看下代码，来分析下什么原因造成的： <style type="text/css"> .wrap { width: 500px; height: 500px; background-color: #ccc; margin: 30px auto; } .inner { width: 100%; height: 300px;
笔记：CSS position属性
weixin_57346222的博客
12-14 589
position属性规定元素的定位类型。(默认为static)。 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 1.absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 元素位置通过left，top，right以及bottom属性进行规定。 <html> <head> <style type="text
【前端经纬】将页面元素定位
weixin_30932215的博客
11-15 59
　　最近在做公司的项目的手，遇到了要是 html页面元素定位的问题。 查阅了相关资料，这里 Mark。 　 1）可以使用 css的position属性实现该功能。 2）代码实现如下（可以运行 http://www.w3school.com.cn/tiy/t.asp?f=csse_position_absolute）： <html&...
HTML5 考试题（四）
HAI6545的博客
12-18 9119
一、单选题（共20题，每题2分） 1.下面选项中,可以设置页面中某个DIV标签当内容溢出的时候出现滚动条的是( ) Aoverflow:hidden Bdisplay:block Coverflow:scroll Ddisplay:scroll; 正确答案:C 解析:超出显示滚动条用的是overflow：auto或者scroll； 2.以下各选项描述正确的是( ) A标题标签、段落标签、<span>标签都是块级元素 B<div>...
css设置滚动条样式；滚动条设置透明
最新发布
i_am_a_div的博客
06-12 262
css设置滚动条样式；滚动条设置透明
css绝对定位
06-01
CSS中的绝对定位 (absolute positioning) 是一种定位方式，它可以让元素相对于其最近的已定位祖先元素（如果没有已定位祖先元素，则相对于初始包含块）进行定位。使用绝对定位可以让元素脱离文档流，并且可以通过指定 top、right、bottom 和 left 属性来确定元素的位置。例如： ```css .positioned { position: absolute; top: 50px; left: 100px; } ``` 这会让具有 `.positioned` 类的元素相对于最近的已定位祖先元素（或者初始包含块）向下偏移 50 像素，向右偏移 100 像素。注意，如果没有已定位祖先元素，那么初始包含块就是视口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值