first image cover photo has position relative and profile pic has position absolute…
when scrolling the profile pic is above the menu bar …
can anyone suggest me how to overcome the problem in 2nd image
Hi Princepranay,
Welcome to Sitepoint forums 
To help you with this problem we’d need to see some code or perhaps a link to the problem.
Absolute elements are removed from the flow and therefore will overlap whatever is in the way so you should probably be using another method such as floating or containing the absolute child via position:relative on a parent. An absolute element is positioned in relation to the nearest ancestor that has a position defined other than static (i.e. relative or absolute (fixed elements are always placed in respect of the viewport)). If no such ancestor exists then the absolute element is placed in relation to the viewport.
However without seeing the structure of your page it will be hard to be specific. You most likely don’t want to move the element with relative positioning either as it is not meant for structural layout as such but for more subtle effects.
Thanks paul for the reply
here is the link for problem http://www.xteam.co.in/abc
here is the css for profile pic
#photo{
width : 180px;
height : 200px;
margin: -70px 0px 0px 20px;
border:1px solid black;
position: absolute;
}
here is the css for cover photo
#cphoto{
width:65%; margin-left: 60px;height: 300px;background: #fcfcfc;border-bottom: 1px black;postion: absolute;margin-top:00px;
}
Hi,
Mcafee won’t let me visit your link and gives me this message:
Warning: Dangerous Site
Whoa!
Are you sure you want to go there?
http://www.xteam.co.in/abc may be risky to visit.
Why were you redirected to this page?
When we visited this site, we found it exhibited one or more risky behaviors.
You need to check why you are getting this message and indeed check your site for any risky behaviour or virus that may lead to this message being presented. It may be a false positive but you need to stop the message appearing or no one will visit.
Therefore, I cannot risk visiting the site and would ask that you just do a view source and then post the html and full css in here please.
Off topic: Paul I got rid of macafee a while back. I use webroot antivirus and find it to be much more user friendly.
don’t know why it is warning but when i did scanning online it has given clean… any way
html code
<!doctype html>
<html lang=“en”>
<head>
<title>pranay</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><a href="http://www.xteam.co.in"> <h3>XTEAM</h3></a> </div>
</div> <div id="cphoto" ><img src="b.jpg" width="100%" height="300"></div>
<div id="profile_main">
<div id="profile_mainleft">
<div id="photo">
<img src ="http://www.xteam.co.in/members/1_1356501891_pp.jpg" width="180" height="200" >
</div>
</div>
<div id="profile_mainright">
<div id="profile_mainright_ur" style="font-color: pink;font-weight:bold;font-family: verdana; font-size:20px; text-transform: capitalize;">pranay</div>
<div id="profile_mainright_pr">
<a href="http://www.xteam.co.in/login"><input type="button" class="user_profile_button" value="Login"></a>
<a href="http://www.xteam.co.in/register"><input type="button" value="Register" class="user_profile_button"></a> </div>
<div id="profile_user_info"></div>
</div>
</div>
<div id="free"></div>
<div id="profile_secondmain">
<div id="wastea"></div>
<div id="profile_status">
<hr />
</div>
</body>
</html>
and the css
#photo{
width : 180px;
height : 200px;
margin: -70px 0px 0px 20px;
border:1px solid black;
position: absolute;
}
#cphoto{
width:65%; margin-left: 60px;height: 300px;background: #fcfcfc;border-bottom: 1px black;postion: absolute;margin-top:0px;
}
div#header{
position: fixed;
top:-30px;
left:0px;
width:100%;
color:white;
padding:8px;
height:60px;
background: black;
}
#profile_main{
width:65%;
height: 200px;
background: #fcfcfc;
margin-left: 60px;
}
#profile_mainleft{
width: 25%;
height:200px;
float: left;
margin-left: 0px;
}
#profile_mainright{
width: 75%;
height: 200px;
float: right;
}
#profile_mainright_pr{
width: 65%;
float:right;
margin-top: 20px;
margin-right: 0px;
}
#profile_mainright_ur{
width: 30%;
float: left;
margin-top:20px;
margin-left: 20px;
}
profile_mainright_pr a{
text-decoration: none;
}
Add to div#header
z-index:1;
Please be aware that sites that use {positon:absolute} and {position:fixed} to position most objects on the page are most inflexible and difficult to manage.
Thank u very much ronpat solved the problem