绝对定位模拟固定定位

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

body,
html {
    height: 100%;
    overflow: hidden;
}

#content {
    height: 100%;
    overflow: auto;
}

#wrapper {
    position: absolute;
    height: 100px;
    width: 100%;
    background-color: #f00;
}

<div id="content">
        <div id="wrapper">

        </div>
    </div>

原文地址:https://www.cnblogs.com/tujw/p/11181787.html

时间: 2024-12-13 07:13:16

绝对定位模拟固定定位的相关文章

绝对定位模拟固定定位效果...

今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被ios固定定位失效所支配的恐怖,还有被市场妹子一脸嘲讽的看着的那份屈辱...(本屌意淫一下巨人). 真是情况就是,ios对固定定位的支持有点奇葩,当固定定位的层里有input一类的能调动虚拟键盘的元素时,一旦用户聚焦这些元素,固定定位的层级中的元素会发生位移,也就是俗称的页面错乱了,本屌当时寻遍网上各种方案,试了大半天时间(其实,就是因为没钱穷屌丝一枚,没有水果手机,每次测试都要厚

解决ie6下不支持fix属性,模拟固定定位

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{marg

绝对定位和固定定位

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位和固定定位</title> <style> body{ height:2000px;/*加上高度出现滚动条*/ } div{ width:100px; height:100px; } .div1{ background:red; } .di

webbasic之相对定位、绝对定位、固定定位

1.相对定位 -以自己为目标 -较小的偏移 -不脱离队伍(流)//位置不会释放   position:relative   left:值   right:值 <!doctype html> <html>   <head>      <meta charset="utf-8"/>      <title>照片墙</title>      <style>         /*先刷墙*/         bo

相对定位 and 绝对定位 and 固定定位

CSS盒子定位有三种 相对定位 position: relative;   绝对定位 position: absolute;   固定定位 position: fixed; 相对定位 position: relative;

相对定位、绝对定位、固定定位区别

position: relative; 相对定位 a.不影响元素本身特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响 position; absolute: 绝对定位 a.使元素完全脱离文档流 b.使内嵌支持宽高 c.块属性标签内容撑开宽度 d.如果有定位父级相对与定位父级发生偏移,没有定位父级相对与整个文档发生偏移 e.相对定位一般配合绝对定位一起使用 position: fixed; 固定定位 与绝对定位的特性基本一致,差别是始终相对与整个文档进行定位 问题:

CSS层模型中的绝对定位 相对定位 固定定位

1.绝对定位:元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的恶意个具有定位属性的父包含块进行绝对定位.如果不存在这么一个元素,则相对于body元素而言,也就是说相对浏览器而言. 2.相对定位:元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档

CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:absolute; 脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级. 固定定位:position:fixed; 这里他所固定的对象是

CSS——相对定位、绝对定位、固定定位

相对定位: 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高. 绝对定位: 相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这个位置不随他的移动而改变. 如果希望文本流抛弃这个部分就需要用到绝对定位.绝对定位不光