61,111
社区成员
发帖
与我相关
我的任务
分享web中相对定位和绝对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.header{
padding:50px;}
.logo{
background-image:url(logo.png);
width:200px;
height:35px;
margin-left:100px;
background-repeat:no-repeat;
}
.fl{
float:left;}
.fr{
float:right;}
.search {
height:30px;
width:300px;
margin-left:15px;
position:relative;}
.ico {
position: absolute;
background-image: url(icon_search.png);
width: 40px;
height: 38px;
background-repeat: no-repeat;
left: 653px;
top: 59px;
}
.a{
background-image:url(nav.png);
height:50px;
width:400px;
float:left;
margin-left:50px;
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="header">
<div class="logo fl"></div>
<div class="fl">
<input type="text" class="search" placeholder="小说，电影，成绩">
</div>
<div class="ico fl"></div>
<div class="a"></div>
</div>
</body>
</html>
为啥我这个.ico{position: absolute; left: 653px;
top: 59px;}不是以.search{}为参照物，可我在.search设置了定位了啊，该怎么改变成以.search为参照物了啊
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.header{
padding:50px;}
.logo{
background-image:url(logo.png);
width:200px;
height:35px;
margin-left:100px;
background-repeat:no-repeat;
}
.fl{
float:left;}
.fr{
float:right;}
.search {
height:30px;
width:300px;
margin-left:15px;
position:relative;}
.ico {
position: absolute;
background-image: url(icon_search.png);
width: 40px;
height: 38px;
background-repeat: no-repeat;
left: 653px;
top: 59px;
}
.a{
background-image:url(nav.png);
height:50px;
width:400px;
float:left;
margin-left:50px;
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="header">
<div class="logo fl"></div>
<div class="fl">
<input type="text" class="search" placeholder="小说，电影，成绩">
</div>
<div class="ico fl"></div>
<div class="a"></div>
</div>
</body>
</html>
为啥我这个.ico{position: absolute; left: 653px;
top: 59px;}不是以.search{}为参照物，可我在.search设置了定位了啊，该怎么改变成以.search为参照物了啊
...全文
请发表友善的回复…
发表回复
skey_wang 2018-01-08
- 打赏
- 举报
布局有问题
<div class="search">
<input placeholder="请输入关键字" value="">
<a class="ico">站内搜索</a>
</div>
.search{
position:relative;
}
ico{
position:absolute;
}
qq_39718591 2018-01-08
- 打赏
- 举报
绝对定位找的是他的父级元素、父级的父级...一直向上直到找到有定位的为止，你的.ico跟.search不是存在上下级关系，所以不能定位。
