- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我目前正在研究CSS,发现我不清楚position:relative是什么。我知道我们可以在父级上使用 position: relative 并在其子级上使用 position: absolute 来相对于其父级而不是浏览器进行绝对定位。
但是,当我来到这个网站的时候,http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm , 给我看。我卡住了,不明白 2 position: relative 是什么意思。
关键的 CSS 如下所示:
body {
margin:0;
padding:0;
}
#container2 {
float:left;
width:100%;
background:orange; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:30%;
background:#fff689; /* column 1 background colour */
}
#col1 {
width:66%;
position:relative;
left:32%; /* 50% + 2%, */
}
要直观了解 CSS 的工作原理,您可以访问 http://jsfiddle.net/hphchan/631j5nLs/ .
希望有人能告诉我两个position:relative是什么意思。我一直在寻找一段时间,但仍然无法得到答案。
谢谢。
最佳答案
默认情况下,元素从上到下排列。浏览器将始终自动从上到下显示 block 元素。
为了手动定位元素,你需要设置position
属性,然后给它一些偏移量,由top
,right
指定>、bottom
或 left
属性。
具有 position:absolute
的元素将从文档流中取出,并放置在与其父元素有一定偏移的位置。
具有 position:relative
的元素将简单地显示在它最初应该显示的位置,但添加了一些偏移量。
#container1
(黄色)在 #container2
(橙色)中。作为 block 元素,两者都会尽可能占据整个宽度。默认情况下,#container1
应将自己定位在 #container2
的左上角,占据 #container2
的整个宽度。但是因为 position: relative; right:30%
,它会尝试让自己与#container2
的右边界保持30%的距离,所以现在:只有70%的宽度是可见的;另外 30% 在屏幕外(左侧)。
#col1
在 #container1
中。按照规定,它占据 66% 的宽度。但请记住,它需要从 #container1
的左上角开始,它目前在屏幕外(30%)!为了将其“带回”到屏幕中,作者使用了left:32%
,使其2%进入屏幕。
您可能已经看到,这是一种复杂的元素定位方式。如果你把它带得太远,没有人能够理解事情的意义。例如。内容(错误地命名为 #col1
)应该占用 50% 的宽度,但 CSS 显示 width:66%
因为这个奇怪的 hack。具有讽刺意味的是, fiddle 中的副本说它包含“没有 CSS hack”。此外, fiddle 包含(滥用)使用 float 、使用非语义标签、div-itis、内容和表示之间缺乏分离......
总的来说,这对初学者来说是一个不好的例子。
关于css - 不清楚位置 : relative in CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31063630/
我知道,关系数据库是一种数据库,其中一个表中的字段链接到其他表中的行,就像这样。 但我不明白这对我作为网络开发人员意味着什么! 据我所知,具有联接和嵌套选择的查询会降低性能(尤其是具有数十个联接的 d
我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Jira 中,将项目链接在一起既简单又实用。 例如,您可以轻松克隆一个问题:创建问题 100,将其克隆到 101。100 然后显示“这个问题有一个克隆:101”,然后 101 显示“这个问题是一个
所以我有这些实体: Group { id: number; name: string; persons: Person[]; } Person { name: stri
我真不敢相信,经过 5 年的 Rails 编程,我还没有想出一个好的解决方案来解决这个常见问题。另外,我假设这个特定问题有 100 个答案,但我不知道定义(关系?协会?等)来很好地搜索它。所以我们开始
我想在我的数据库记录中包含动态字段。 例如:我想构建一个应用程序供用户创建自己的表单。 用户可以创建以下表单: 个人资料: 全名 街道 工作 电话 首页 工作 移动 兴趣 兴趣 1 兴趣 2 兴趣 3
共有三个表:businesses、categories、categorizations、 CREATE TABLE businesses ( id SERIAL PRIMARY KEY, na
这个问题在这里已经有了答案: How can I vertically center a div element for all browsers using CSS? (48 个答案) 关闭 6
对于问题的错误措辞,我们深表歉意。我是 stackoverflow 的新手,也是 PIG 的新手,正在尝试自己进行实验。 我有一个处理 words.t 文件和 data.txt 文件的场景。 文字.t
关于像Cassandra 这样的反革命NoSQL 数据库的讨论很多。 , CouchDB , Hypertable , MongoDB , Project Voldemort , BigTable ,
我的处境与ICTylor's post here 类似。 . 所以我有: user1=User.find(1); user2=User.find(2); written=Micropost.where
尝试获取与事件关联的用户列表。这是我 Eloquent 模型: 用户.php: public function fbevents() { $this->belongsToMany('Fbeve
我有一个在 MySQL 数据库上运行的 Web 应用程序(正在开发中)。我正在考虑将我的应用程序迁移到 Google App Engine,并希望更好地了解如何将我的简单关系数据库模型转换为非关系方法
我应该在构造函数中放入什么:与实例相关的东西还是与类相关的东西? 考虑这段代码: var count = 0 TView = function (x, y) { this.x = x, this.y
我正在努力使用 postgreSQL,因为我不知道如何将 A 类型的一个实例链接到 B 类型的一组实例。我将举一个简短的例子: 假设我们要建立一个包含音乐专辑和人物的数据库,每个人都有一个他们最喜欢的
我需要检索一个对象并获取关系和嵌套关系。 所以,我有以下三个模型: 用户模型: module.exports = { attributes: { name: { type: '
给定一个表定义: Articles: art_id | name -------|-------------- 1 | article1 2 | article2 3
谁能举例说明“em 是相对于字体大小的,% 是相对于父元素的”? 相对于字体大小和相对于父元素是什么意思? 最佳答案 考虑一下您是否要在另一个框内定义一个框的高度。如果您将高度指定为 50%,它将是包
我有一个多对多关系,当我加载位于此关系一侧的实体时,我希望将另一侧相关实体的 ArrayCollection 视为其属性。然而,这并没有发生——加载的 ArrayCollection 中没有任何元素,
Relation#update(id, attributes) 文档提到“无论对象是否成功保存到数据库,都会返回结果对象。”,而 Relation#update_all (updates, condi
我是一名优秀的程序员,十分优秀!