positon，text-align,margin的定位问题？小弟不太理解

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{margin: 0; padding: 0;}
    .head{width: 100%;height: 90px; background-color: black;
        overflow: hidden;
        position: fixed;
        top: 0;
        z-index: 1;}
    .head .logo{
        width: auto;
        height: 90px;
        float: left;
    }
    .head .nav{
        float: right;
        margin-right: 80px;
    }
    .head .nav li{
        list-style-type: none;
        float: left;
        font-size: 20px;
        line-height: 90px;
        color: white;
        margin-right: 60px;
    }
    .head .nav:hover li{cursor:pointer;}
    /*内容框架*/
    .container{
        width: 100%;height: 4000px;
        margin-top: 90px;/********老师这里有一个问题*******/
        background-color: #00FFCC;
        overflow: hidden;
    }
    /*内容--左半部*/
    .container .left{
        width: 50%;height: 2000px;
        float: left;
        position: absolute;
        top:400px;
        left: 20%;
        overflow: hidden;
    }
    .container .left h4{
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .container .left .title{
        width: auto;
        height: auto;
        float: left;
    }
    .container .left .title li{
        border: 1px #00FFCC solid;
        background-color: pink;
        list-style-type: none;
        margin-bottom: 5px;
    }
    .container .left .list{
        width: auto;
        height: auto;
        margin-left: 30px;
        float: left;
    }
    .container .left .list li{
        border: 1px #00FFCC solid;
        list-style-type: none;
        margin-bottom: 5px;
    }   
 
    /*内容--右半部*/
    .container .right{
        width: 50%; height:2000px;
        position: absolute;
        top: 400px;
        left: 60%;
        float: left;
    }
    .container .right h4{
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .container .right div ul li{
        border: 1px #00FFCC solid;
        list-style-type: none;
        margin-bottom: 5px;
        float: left;
        margin-right: 50px;
    }
    .container .right .line_1{
        overflow: hidden;
    }
    .container .right .line_2{
        overflow: hidden;
    }
    .container .right .line_3{
        overflow: hidden;
    }
 
    /*尾部*/
    .foot{
        width: 100%;height: 80px;background-color: black;
        overflow: hidden;
        position: fixed;
        bottom: 0;
    }
 
    .foot .nav_2{
        margin-left: 20%;
        overflow: hidden;
    }
 
    .foot .nav_2 ul li{
        list-style-type: none;
        font-size: 26px;
        font-weight: bold;
        color: white;
        float: left;
        line-height: 80px;
        margin-right: 50px;
         
    }
     
    .foot .nav_2:hover li{cursor: pointer;}
 
    }
 
  </style>
</head>
<body>
    <div class="head">
        <div class="logo">
            <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
        </div>
        <div class="nav">
            <ul>
                <li>课程</li>
                <li>职业路径</li>
                <li>实战</li>
                <li>猿问</li>
                <li>手记</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <h4>课程推荐</h4>
            <div class="title">
                <ul>
                    <li>职业路径</li>
                    <li>职业路径</li>
                    <li>职业路径</li>
                    <li>职业路径</li>
                    <li>职业路径</li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li>HTML5与CSS3实现网页动态</li>
                    <li>零基础入门Android语法与界面</li>
                    <li>IOS基础语法与常用控件</li>
                    <li>PHP入门开发</li>
                    <li>JAVA入门开发</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <h4>相关课程</h4>
            <div class="line_1">
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                </ul>
            </div>
            <div class="line_2">
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JQurey</li>
                </ul>             
            </div>
            <div class="line_3">
                <ul>
                    <li>移动端基础</li>
                    <li>移动端APP开发</li>
                </ul> 
            </div>
        </dir>
    </div>
    <div class="foot">
        <div class="nav_2">
            <ul>
                <li>网站首页</li>
                <li>企业合作</li>
                <li>人才招聘</li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>友情链接</li>
            </ul>
        </div>
    </div>
</body>
</html>

老师我有两个问题想请教：1.我上面备注的地方，我把中间内容部分通过外边框挤出了90px（和头部一样高的）宽度，但是我在设置中间的“课程推荐”内容的时候我通过定位 position：absolute 来定位我内容的位置，当我设置top为0的时候，内容会给头部覆盖。我自己的理解就是：“position是在可视区域进行调整的，所以设着为top设置为0的时候，会给覆盖。”这样理解对吗？

2.对于底部的居中问题：div，ul，li都是块元素，之前说text-align只对块级元素有效，但是这个text-align却不能实现居中效果；不仅这个我尝试过用margin：0 auto；对页尾进行居中但是也没效果，如果这个不行的话我又不太理解为什么margin-left：20%可以对我页尾列表进行挪动

精慕门8222655 2018-09-12

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-09-12 16:49:27

定位元素参照的不是可视区域 , 而是参照离它最近的已定位的祖先元素 ,.如果没有最近的已定位的祖先元素 , 那么元素会参照html定位 , 通俗的说 ,定位元素如果它的祖先元素( 如父元素 , 爷爷元素....)设置了定位 ,它会参照离它最近的祖先元素定位 , 也就是父元素 . 页面找不到div.left的已定位的祖先元素 , 它会根据整个html定位. 所以代码中可给它父元素设置相对定位: