css绝对定位问题

尔东主机 2016-08-09 04:48:19
http://t.8cch.com 请教一下，怎么我这块右边的部分出不来呢？我绝对定位，结果不知道跑哪里去了，表格有背景色的。
background-color:#36F;



...全文
362 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
letMeAlone_ 2016-08-21
  • 打赏
  • 举报
 回复
引用 9 楼 纯黑的身心的回复:
授之以鱼不如授之以渔，首先你要了解position的absolute和relative的区别，以下简写为pa和pr,两个都是脱离正常文档流，pa是脱离之后不占据默认文档流空间，而pr则保留文档流的占据空间，只是看起来位置相对移动了，设置为pa之后，该元素的绝对定位是相对于第一个非static的父元素而言，固而我们经常会有一个操作希望子元素根据父元素移动而移动，就是让父元素为pr,保持父元素文档位置，子元素pr相对于父元素，也就是相对于非static的元素来绝对定位
最后面的子元素随父元素移动，子元素应该设置为pa，写错了，请注意
letMeAlone_ 2016-08-21
  • 打赏
  • 举报
 回复
授之以鱼不如授之以渔，首先你要了解position的absolute和relative的区别，以下简写为pa和pr,两个都是脱离正常文档流，pa是脱离之后不占据默认文档流空间，而pr则保留文档流的占据空间，只是看起来位置相对移动了，设置为pa之后，该元素的绝对定位是相对于第一个非static的父元素而言，固而我们经常会有一个操作希望子元素根据父元素移动而移动，就是让父元素为pr,保持父元素文档位置，子元素pr相对于父元素，也就是相对于非static的元素来绝对定位
jio可 2016-08-10
  • 打赏
  • 举报
 回复
引用 6 楼 cjq001 的回复:
真是纠结啊！
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .menu{
        clear: both;
        height:40px;
        width:100%;
        background-color: pink;
    }
    .menu ul{
        float:right;
        margin:0px;
        padding:0px;
        list-style: none;
    }
   .menu ul li {
        width:80px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
       float: left;
    }
    .menu ul li:active{
        background-color: blue;
        color:white;
    }
    .hide{
        display: none;
    }
    .content{
        width:100%;
        height:-webkit-calc(100% - (20px));
        border:1px #ccc solid;
    }
    .contentWrapper{
        width:100%;
        height:400px;
    }
    .contentWrapper .left{
        width:300px;
        height:100%;
        background-color: green;
        float: left;
    }
    .contentWrapper .right{
        width:calc(100% - 302px);
        height:100%;
        background-color: blue;
        float: left;
    }
</style>
<body>
<div class="mid">
    <div class="menu">
        <ul>
            <li role="a">aaaa</li>
            <li role="b">bbbb</li>
            <li role="c">cccc</li>
            <li role="d">dddd</li>
            <li role="e">eeee</li>
        </ul>
    </div>
    <div class="content">
        <div class="contentWrapper" id="a">
            <div class="left">菜单aaaa</div>
            <div class="right">内容aaaa</div>
        </div>
        <div class="contentWrapper hide" id="b">
            <div class="left">菜单bbbb</div>
            <div class="right">内容bbbb</div>
        </div>
        <div class="contentWrapper hide" id="c">
            <div class="left">菜单cccc</div>
            <div class="right">内容cccc</div>
        </div>
        <div class="contentWrapper hide" id="d">
            <div class="left">菜单dddd</div>
            <div class="right">内容dddd</div>
        </div>
        <div class="contentWrapper hide" id="e">
            <div class="left">菜单eeee</div>
            <div class="right">内容eeee</div>
        </div>
    </div>
</div>
<script src="../js/jquery.js"></script>
<script>
    var contents = $(".contentWrapper");
    $(".mid").on("click","li",function(){
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
            var _role = $(this).attr("role");
            contents.each(function(){
                $(this).addClass("hide");
            });
            $("#"+_role).removeClass("hide");
    });
</script>
</body>
</html>
不要使用太多的定位，不太好
尔东主机 2016-08-10
  • 打赏
  • 举报
 回复
真是纠结啊！
尔东主机 2016-08-10
  • 打赏
  • 举报
 回复
引用 4 楼 u012418098 的回复:
看了整个页面的布局好乱。。。绝对定位也用的很糟糕
那要怎么改才好呢？谢谢！
jio可 2016-08-10
  • 打赏
  • 举报
 回复
看了整个页面的布局好乱。。。绝对定位也用的很糟糕
斯洛文尼亚旅游 2016-08-10
  • 打赏
  • 举报
 回复
红色那块不是掉下去了，样式也没有absolute定位啊。而且你说的是那块。。这么多代码
尔东主机 2016-08-09
  • 打赏
  • 举报
 回复 

<div class="f1">
  <div class="f1-top">  
    <div class="f1-top-top">
      <img src="images/qindex2016/F1/stairs1.png" />
      <span class="span24-f1-top">
        服装百货
      </span>
      <ul>
        <li class="f1-li-1">
          <span class="f1-li-span14">
            0息推荐
          </span>
          
        </li>
        <li class="f1-li-2">
          <span class="f1-li-span14">
            世界名表
          </span>        
    
          <div class="f1-in">
            <div class="f1-top-in">
              <div class="f1-top-in-left">
              
              </div>
                    
              <div class="f1-top-in-right">
                <div class="f1-top-in-right-top">
                  <div class="f1-top-in-right-1">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface01.png"/></a>
                  </div>
                  <div class="f1-top-in-right-2">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface02.png"/></a>
                  </div>
                  <div class="f1-top-in-right-3">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface03.png"/></a>
                  </div>
                  <div class="f1-top-in-right-4">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface04.png"/></a>
                  </div>
                </div>
                <div class="f1-top-in-right-bottom">
                  <div class="f1-top-in-right-5">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface05.png"/></a>
                  </div>
                  <div class="f1-top-in-right-6">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface06.png"/></a>
                  </div>  
                  <div class="f1-top-in-right-7">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface07.png"/></a>
                  </div>
                  <div class="f1-top-in-right-8">
                    <a href="" target="_blank"><img src="images/qindex2016/F1/watch/surface08.png"/></a>
                  </div>  
                </div>  
              </div> <!-- <div class="f1-top-in-right"> -->
            </div> <!-- <div class="f1-top-in"> -->
    
            <div class="f1-bottom-in">    
              <div class="f1-bottom-in-left">
              
              </div>    
              
              <div class="f1-bottom-in-right">
                <div class="f1-bottom-in-right-1">
                  <a href="" target="_blank"><img src="images/qindex2016/F1/watch/big-surface01.png"/></a>
                </div>
                <div class="f1-bottom-in-right-2">
                  <a href="" target="_blank"><img src="images/qindex2016/F1/watch/big-surface02.png"/></a>                
                </div>
                <div class="f1-bottom-in-right-3">
                  <a href="" target="_blank"><img src="images/qindex2016/F1/watch/big-surface03.png"/></a>
                </div>
                <div class="f1-bottom-in-right-4">
                  <a href="" target="_blank"><img src="images/qindex2016/F1/watch/big-surface04.png"/></a>
                </div>
              </div>  
            </div> <!-- <div class="f1-bottom-in"> -->
          </div> <!-- <div class="f1-in"> --> 
        </li>
        <li class="f1-li-3">
          <span class="f1-li-span14">
            运动名品
          </span>
        
        </li>
        <li class="f1-li-4">
          <span class="f1-li-span14">
            鞋包配饰
          </span>
        
        </li>
        <li class="f1-li-5">
          <span class="f1-li-span14">
            珠宝首饰
          </span>
        
        </li>
        <li class="f1-li-6">
          <span class="f1-li-span14e">
            床上用品
          </span>
        
        </li>
      </ul>
    </div> <!-- <div class="f1-top-top"> -->
  </div>  <!-- <div class="f1-top"> -->  
</div> <!-- <div class="f1"> -->


/* f1开始 */
.f1{
    clear:both;
	width:1180px;
	height:666px;
	margin:20px auto 0px auto;
	position:relative;
}
.f1-top{
    clear:both;
	width:100%;
	height:506px;	
	position:absolute;
	top:0px;
	left:0px;
}
.f1-top-top{
	display:block;
	width:150px;
	height:34px;
	line-height:34px;
	position:absolute;
	top:0px;
	left:0px;
}
.f1-top-top img{
	display:block;
	width:31px;
	height:28px;
	line-height:28px;
	background:url(../images/qindex2016/F1/stairs1.png) no-repeat 0px -12px;
	position:absolute;
	top:0px;
	left:0px;
}
.span24-f1-top{
	display:block;
	width:100px;
	height:100%;
	line-height:100%;
	font-size:24px;	
	position:absolute;
	top:0px;
	left:40px;
}
.f1-top-top ul{
	display:block;
	width:528px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:652px;
	border:#999 solid 1px;
}
.f1-li-1{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:0px;	
}
.f1-li-2{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:88px;		
}
.f1-li-3{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:176px;		
}
.f1-li-4{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:264px;		
}
.f1-li-5{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:352px;		
}
.f1-li-6{
	width:88px;
	height:34px;
	line-height:34px;	
	position:absolute;
	top:0px;
	left:440px;		
}
.f1-li-span14{
	display:block;
	width:100%;
	height:14px;
	line-height:14px;
	font-size:14px;
	text-align:center;
	margin:10px 0px 10px 0px;
	border-right:#999 solid 1px;
}
.f1-li-span14e{
	display:block;
	width:100%;
	height:14px;
	line-height:14px;
	font-size:14px;
	text-align:center;
	margin:10px 0px 10px 0px;
}
.f1-in{
	display:block;	/* 隐藏 */
    clear:both;
	width:100%;
	height:666px;	
	overflow:hidden;
	position:absolute;
	top:35px;
	left:-740px;		
}
.f1-top-in{
    clear:both;
	width:100%;
	height:472px;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;		
}
.f1-top-in-left{	
	width:326px;
	height:472px;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;	
	background-color:green;	
}
.f1-top-in-right{	
	width:844px;
	height:472px;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:336px;		
	background-color:#36F;
}
.f1-top-in-right-top{
	display:none;
	width:100%;
	height:50%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;		
}
.f1-top-in-right-bottom{
	display:none;
	width:100%;
	height:50%;
	overflow:hidden;
	position:absolute;
	top:236px;
	left:0px;		
}
.f1-top-in-right-1, .f1-top-in-right-5, f1-bottom-in-right-1{
	width:211px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;		
}
.f1-top-in-right-2, .f1-top-in-right-6, f1-bottom-in-right-2{
	width:211px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:211px;		
}
.f1-top-in-right-3, .f1-top-in-right-7, f1-bottom-in-right-3{
	width:211px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:422px;		
}
.f1-top-in-right-4, .f1-top-in-right-8, f1-bottom-in-right-4{
	width:211px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:633px;		
}
.f1-bottom-in{
    clear:both;
	width:100%;
	height:160px;	
	overflow:hidden;	
	position:absolute;
	top:472px;
	left:0px;	
}
.f1-bottom-in-left{
	width:326px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;	
	background-color:red;	
}
.f1-bottom-in-right{
	width:844px;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	left:336px;		
	background-color:#36F;	
}
.f1-li-2:hover .f1-in{
    display:block;	
}
/* f1结束 */
尔东主机 2016-08-09
  • 打赏
  • 举报
 回复
引用 1 楼 xiaofanku 的回复:
贴 一下你的html代码吧
代码太多，请看测试网址：http://t.8cch.com 谢谢！
街头小贩 2016-08-09
  • 打赏
  • 举报
 回复
贴 一下你的html代码吧
div+css布局大全
4. **定位机制**：CSS提供了多种定位机制，包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位，其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**：在早期的Web开发中，浮动布局...
div+css 网站布局案例精粹 Sample
- **定位机制**：包括静态定位、相对定位、绝对定位和固定定位，它们在网页布局中起着关键作用。 3. **布局技巧** - **Flexbox布局**：一种现代化的布局模式，适用于一维布局，如行或列。它简化了对元素的对齐和...
CSS 绝对定位问题和粘性定位介绍
CSS 绝对定位问题和粘性定位介绍
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 css绝对定位居中的实现方法有很多，下面将给...
css绝对定位如何居中？css绝对定位居中的四种实现方法
在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 打造全网web前端全栈资料库（总目录）看完学...
CSS

61,124

社区成员

60,705

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章