html 相对于父标签位置,css子元素如何相对父元素定位？

在css中，可以使用position属性，通过给父元素设置相对定位“position:relative;”样式，给子元素设置绝对定位“position:absolute;”样式来实现子元素相对父级元素定位。

本教程操作环境：windows7系统、css2版，该方法适用于所有品牌电脑。

相关推荐：《编程视频课程》

css中子元素相对父元素定位的实现方法

父级元素样式设置：

position:relative;

子元素样式：

position:absolute;

示例代码：

html结构

css

#div1{

width:500px;height:500px;

background-color:darkgray;

position:relative;

}

#div2{

width:30px;height:30px;

background-color:red;

position:absolute;

right:20px;

}

效果

原理

浏览器渲染html，是有文档流的说法的，块级元素换行渲染，行内元素行内渲染，在这里，两个div都是块级元素，一个父，一个子，正常来说的渲染结果是父元素在浏览器左上角，子元素在父元素的左上角。

如果我们要对子元素相对父元素进行定位，就要用对position属性。

position属性值

属性值描述

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

relative 生成相对定位的元素，相对于其正常位置进行定位。

我们知道，要使用相对于父元素的定位，肯定要使用absolute，为什么直接使用absolute不起作用？因为使用absolute相对于父元素定位，对父元素有一个要求，就是父元素的position不能是static，如果父元素的position是static那么就继续向上查找元素，知道找不position不为static的元素，对这个元素进行相对定位，所以，需要将父元素的position设置为relative，这样做是没有影响的，因为，relative只是相对于正常位置进行定位，正常位置就是所谓的文档流默认的输出位置，如果我们设置了position为relative而不设置偏移量x，y，那就相当于父元素的位置是没有变动的。

标签：定位,元素,relative,相对,position,css,absolute

来源： https://blog.csdn.net/jycg789/article/details/110870719

html 相对于父标签位置,css子元素如何相对父元素定位？相关推荐

vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
javaweb带父标签的自定义标签
1.完整的示例代码:要实现的功能是父标签中有name属性,子标签将父标签的name属性值打印到jsp页面上. 1.1 父类和子类的标签处理器类 testParentTag.java package c ...
HTML标签和CSS基础
form表单域标签 1.作用: 用来收集用户的输入信息的, 类似于快递单 2.form标签是双标签 3.属性: ①.action属性: 把当前的表单提交到某台服务器或某个网址测试提交到后台服务,没 ...
js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？，css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构如图img加上float 子元素div显示正常. 不加float div显 ...
css居父容器下,整理：子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
css样式子绝父相,子绝父相_HTML+CSS前端基础知识教程_腾讯视频
更多资料源码请加3252897743第1天 html 1.HTTP协议 2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...

html 相对于父标签位置,css子元素如何相对父元素定位？

html 相对于父标签位置,css子元素如何相对父元素定位？相关推荐

最新文章

热门文章