CSS 父元素中的绝对定位

position属性实现绝对定位

<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%;
    height:100%;
}
#block{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:absolute; /* absolute绝对定位 */
    left:20px; /* 块的左边框离页面左边界20px */
    top:40px; /* 块的上边框离页面上边界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>

以上的代码我们可以看出父块#father没有设置position属性,而子块#block采用的是绝对定位,经过测试发现子块#block参照浏览窗口左上角

为原点,子块左边框相对页面<body>左边的距离为20px,子块的上边框相对页面<body>上面的距离为40px

为父块这是position属性

#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    position:relative;
    width:100%;
    height:100%;
}

我们发现子块的参照物为父块的#father,距左侧20px,距上端40px

注意top、right、bottom、left这4个CSS属性，它们都是配合position属性使用的，表示的是块的各个边界离页面边框(position设置为absolute时)

或者原来的位置(position设置为relative)的距离。只有当position属性设置为absolute或者relative时才能生效；

用position属性实现相对定位

<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%; height:100%;
    padding:5px;
}
#block1{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:relative; /* relative相对定位 */
    left:15px; /* 子块的左边框距离它原来的位置15px */
    top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>

我们可以看到字块的左边框相对于其父块的左边框(它原来所在的位置)距离为15px,上边框也是一样的道理,为10%;

理解"它原来的位置":子块和父块原先的位置的是一致的(因为父块包含字块,视觉上看是几乎重叠的)

此时子块的宽度依然是未移动前的宽度,撑满未移动前父块的内容。只是由于向右移动了，因此右边框超出了父块。

如果希望子块的宽度仅仅为其内容加上自己的padding值，可以将它的float属性设置为left，或者指定其宽度width；

案例: 文本在图片上显示

述

在HTML中,存在这许许多多的元素(同:”HTML标签”),这些元素最终可分为三类,分别是块级元素,内联元素(同:”行内元素”),块级内联元素(同:”行内块元素”)。

你对这些元素是否真的了解呢?

我们来看看这三类元素的特点:

块级元素

一.特点

1.每个块级元素都从新的一行开始显示(块级元素独占一行)

2.元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置

3.块级元素在网页中所占面积=内容区(content)+内边距(padding)+边框(border)+外边距(margin)

4.块级元素本身未设置宽度的情况下,宽度=父元素宽度-该元素的左右外边距-该元素的左右边框-该元素的左右内边距

5.块级元素未设置padding和border的情况下,padding和border的数值为0

6.块级元素未设置宽度和外边距的情况下,margin的值为0,宽度为100%(即与父元素宽度一致)

7.块级元素设置宽度但未设置外边距的情况下,左外边距的值为0

8.块级元素设置宽度,未设置padding和border,同时设置margin: 0 auto的情况下,左右外边距平分父元素宽度-该元素宽度所剩余的空间

9.块级内联元素不受父元素的line-height以及自身的vertical-align影响

二.将非块级元素转换成块级元素的方法

1.display:block

2.float:left或right

3.position:absolute或fixed

4.父元素使用display:flex,子元素会变为块级元素

三.常见块级元素

内联元素

一.特点

1.当父元素宽度足以放下多个内联元素时,一行内可以显示多个内联元素,否则放不下的内联元素将另起一行(一行存放多个内联元素)

2.内联元素的宽度,高度由该元素的内容撑开

3.内联元素的宽度/高度/padding-top/border-top/margin-top/margin-bottom设置无效

4.如果padding/border/margin未设置的情况下,全部为0

5.内联元素受父元素的line-height以及自身的vertical-align影响

二.将非内联元素转换成内联元素的方法

使用display:inline

三.常见内联元素

块级内联元素

一.特点

1.当父元素宽度足以放下多个块级内联元素时,一行内可以显示多个块级内联元素,否则放不下的块级内联元素将另起一行(一行存放多个块级内联元素)

2.块级内联元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置

3. 块级内联元素的宽度,高度未设置的情况下,由该元素的内容撑开

4.块级内联元素受父元素的line-height以及自身的vertical-align影响

二.将非内联元素转换成内联元素的方法

使用display:inline-block

三.常见内联元素

<input>

web前端之二叉搜索树

、HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素；
元素在浏览器显示时，通常会以新行来开始和结束；
如：<h1>，<p>，<ul>，<table>，<div>等标签；

二、HTML 内联元素

内联元素在显示时通常不会以新行开始；
如：<b>， <td>， <a>， <img>，<span>等标签；

三、HTML <div> 元素

HTML 中的<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器；
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分；
<div> 元素经常与 CSS 一起使用，用来布局网页；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是绿色-->
 <div class="one">
 </div>
 <!--子divtwo，是黄色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如图所示：

在线咨询

上一篇：JS短文：如何使用 JS 将文本以纯文本形式粘贴到可编辑内容元素中？
下一篇：什么是EDM电子邮件？是怎么制作的？如何使用？一文讲清楚

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 父元素中的绝对定位

述

块级元素

内联元素

块级内联元素

您的项目需求