整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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；
案例: 文本在图片上显示
看下问题的截图：
大家可以先想一想
下面是我总结的方法：
方法一：子元素浮动float:left；（考虑脱离文档流后后面元素不易控制，故不首选）
方法二：子元素：display: inline-block; --->会有空隙
原因：因为行内元素或者行内块元素换行后之间会有一个间隙只要换行会有5px的间距--->解决 : 文本不换行
问题：https://blog.csdn.net/qq_39189819/article/details/90813184
原理
行内元素和行内块元素换行后之间会有一个间隙
方法三：子元素写display: inline-block; 给父元素写font-size:0; 把所有间距都去了
方法四：弹性盒子是 CSS3 的一种新的布局模式，给父元素加display:flex;是标准文档流---可以高效的布局 IE10以下不支持
、问题：元素浮动导致的父元素高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。
例如：
的效果是：
二、为了解决问题，这里先介绍一下浮动元素的特点：
（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。
（2）如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素。
（3）浮动元素不会超过它上边的浮动的兄弟元素，最多一边齐。
（4）浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。
（5）块元素脱离文档流以后，不会独自占一行，宽度和高度都被内容撑开。
（6）内联元素脱离文档流以后会变成块元素
三、解决方法
(1)浮动元素后添加<div class="clear"></div>添加清除浮动样式，使用这种方式会在页面中添加多余的结构。
(2)使用after伪类，向父元素后添加一个块元素，并对其清除浮动。该种方式的原理和方法一原理一样，但是不用向页面中添加多余的结构。
(3)为父元素添加样式overflow:hidden。这种方法对于有子元素有定位并且要求超出父容器范围的情况不适用。
(4)手动为父元素添加高度，需要计算内容的高度，不便于页面调整。
四种方法都可以实现调整，调整后的效果：
这里推荐第二种方法，使用after伪类的方式。
*请认真填写需求信息，我们会在24小时内与您取得联系。
