CSS之定位（包括相对定位、绝对定位、浮动）
来源：互联网 发布：第二次农业普查数据 编辑：程序博客网 时间：2024/05/06 16:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Css定位</title><style type="text/css">/*CSS position属性*static 元素框正常生成*relative(相对定位) 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。移动元素会导致它覆盖其它框。*absolute(绝对定位) 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。*fixed(固定定位) 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身**//*CSS top(right、bottom、left)定义一个定位元素上(右、下、左)外边距边界与其包含块上(右、下、左)边界之间的偏移*/img{position:absolute;top:1px;right:2px;bottom:1px;left:12px;}/*overflow 定义当元素的内容溢出其区域时发生的事情*visible：默认值，内容不会被修剪，会呈现在元素框之外*hidden：内容会被修剪，并且其余内容不可见*scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*inherit：规定应该从父元素继承 overflow 属性的值。*/.scroll {background-color:#00FFFF;width:150px;height:150px;overflow: scroll}.hidden{background-color:#00FFFF;width:150px;height:150px;overflow: hidden}.auto{background-color:#00FFFF;width:150px;height:150px;overflow: auto}/*z-index属性 设置元素的堆叠顺序*注意：Z-index只能在定位元素上凑效，如：position：absolute;该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。*auto：堆叠顺序与父元素相等*number：设置元素的堆叠顺序*/.x{position:absolute;left:0px;top:760px;z-index:-1}.y{position:absolute;top:860px;left:0px;z-index:1px;}</style></head><body><div>CSS定位<img src="http://www.w3school.com.cn/i/eg_smile.gif" alt="" /></div><br /><br /><br /><br /><br /><br /><p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p><div class="scroll">这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。</div><br /><br /><div class="hidden">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden，内容会被修剪，并且其余内容不可见。内容会被修剪，并且其余内容不可见。内容会被修剪，并且其余内容不可见。默认值是 visible。</div><br /><br /><div class="auto">这个属性定义溢出元素内容区的内容会如何处理。如果值为auto，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。默认值是 visible。</div><br /><br /><div><h1>这是一个标题</h1><img class="x" src="http://www.w3school.com.cn/i/eg_mouse.jpg" /><p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p></div><br /><div><h1>这是一个标题</h1><img class="y" src="http://www.w3school.com.cn/i/eg_mouse.jpg" /><p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p></div></body></html>
