Geek Answers Handbook

HTML + CSS - Overlapping header image

I saw a layout similar to the image below, used on some sites before, and I really like the design, but I don’t know how to implement the overlapping image (Profile Image). I use bootstrap if this helps. Any ideas? Layout Thank!

+4
source share
7 answers

I see three ways to do this in general.

position: absolute

position:absolute ( ) position:relative. top: -100px - , left: 100px - . , , 100 , 100 . , .

:

, , , . , position:absolute, position:relative. . x y , top left. , top:-100px . , . , , .

. (, margin-top:-100px). , , . , , , . , , , , . , overflow , , .

Demo

: http://jsfiddle.net/jmarikle/2w4wqfxs/1

+3

position: absolute; top: 20px; left: 20px - , .

0

html, "position: relative". . "" "top: XXpx" , . "left".

.

<div class="header">
    <img src="" alt="my image" class="floatdown">
    this is my header, image could go here too
</div>

<div class="body">
    this is my body content
</div>


.header {

    position: relative;
    width: 100%;
    height: 150px;
    border: 2px solid #000;
    text-align: right;
}

.body {

    position: relative;
    width: 100%;
    border: 2px solid #000;
    height: 500px;
    text-align: right;
}

img {
    width: 90px;
    height: 90px;
    border: 2px solid #ddd;
}

.floatdown {
    position: absolute;
    top: 100px;
    left: 20px;
}
0

float , "" , .

CSS:

#profile-image{
    width: 100px;
    height: 100px;    
    float: left;    
    margin: 100px;
}

margin .

Fiddle: http://jsfiddle.net/y706d77a/

position: absolute, . .

0

.

Here is the code link: http://codepen.io/anon/pen/zxYrxE

HTML:

<div class="main-container">
  <div class="header">
    <p>This is the header div</p>
  </div>
  <div class="profile">
    <p>Profile</p>
  </div>
  <div class="content">
    <p>Some dummy content div</p>
  </div>
</div>

CSS needs to be big to fit here, so just open the link.

0
source

Put the profile image in the title, make the position: absolute;image position: relative;and give it a negative value bottomequal to half the height of the image, and set leftto place it horizontally to taste.

HTML

<header>
    <img class="profile">
</header>

<div>Content</div>

CSS

header, div{
    min-height: 110px;
    background: darkgray;
}
header{
    position: relative;
    background: gray;
}
img{
    position: absolute;
    bottom: -50px;
    left: 100px;
}

http://jsfiddle.net/dekqn84c/

0
source

More articles:


All Articles