How to fix my anchor link issue

Question

I have a question regarding the anchor tag.

I have a page like

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

My css

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

However, it seems like every time I click test1 to test3 link, my 'contents' div got push to top of my header div. so my 'content' div is cover by my header div (150px). Are there anyways to fix my issue? Thanks a lot!

You are using `position:fixed`, which removes the element from document flow. So, other content will overlap. What have you tried to fix it? What goes wrong with your attempt? — showdev, Oct 03 '13 at 00:16

Nick Louloudakis · Accepted Answer · 2013-10-03T00:25:11.213

3

Set z-index parameter to -1. Having it with a high value his puts your div over the others and will be floated over the others.-1 Will set it in a z-ordering less than trhe others. You can also remove it completely if you don't care about specific z-ordering betheen divs in code.

UPDATE: Fixed position will also cause your div to be "anchored" in a place of the page, and be expanded without "pusing" the others. Please also consider changing CSS position element value (http://www.w3schools.com/css/css_positioning.asp).

edited Oct 03 '13 at 00:25

answered Oct 03 '13 at 00:12

Nick Louloudakis

5,856
4
41
54

but I need my div on top of it. removing z-index will make the 'content' cover my header div +1 – FlyingCat Oct 03 '13 at 00:15
Answer updated. I think both position and z-index are causing the issue. – Nick Louloudakis Oct 03 '13 at 00:28

score 1 · Answer 2 · answered Oct 03 '13 at 00:17

1

I would try:

.content{position:absolute;top:150px;overflow-y:auto;}

to force all your content to always be below the header.

answered Oct 03 '13 at 00:17

DevlshOne

8,357
1
29
37

What if you add the overflow-y styling? – DevlshOne Oct 03 '13 at 00:19

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

Hi maybe this should do the trick

<a name="AnchorName" class="anchor"></a>

and

.anchor {
   position: relative;
   top: -[number]px;
}

Edit :

Or with anchor like this

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>

edited May 23 '17 at 10:25

Community

1
1

answered Oct 03 '13 at 00:25

score 0 · Answer 4 · answered Oct 03 '13 at 00:53

Here is a really odd way of doing it...

Suppose this is your HTML, place the anchor (no content!) right before the element of interest:

<div id='header'>bunch of stuff and images</div>
<div class='nav'> 
    <a href='#test1'>test1</a>
    <a href='#test2'>test2</a>
    <a href='#test3'>test3</a>
</div>

<div class='content'>
<a name="test1"></a>
<div class='content-panel'>
   <a>test1 project</a>
   bunch of stuff
</div>

<a name="test2"></a>
<div class='content-panel'>
   <a>test2 project</a>
   bunch of stuff
</div>

<a name="test3"></a>
<div class='content-panel'>
   <a>test3 project</a>
   bunch of stuff
</div>

</div>

And apply this CSS:

body {
    margin: 0;
}
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    height:150px;
    background-color: rgba(125,125,20,0.6)
}
.nav {
    margin-top: 150px;
    border: 0px solid blue;
    padding: 10px;
    width: auto;
    border-bottom: 1px solid blue;
}
.content {
    overflow: auto;
}
.content-panel {
    background-color: lightgray;
    margin: 0px 0;
    padding: 10px;
    height: 400px;
}
a:target {
    display: block;
    line-height: 0;
    margin-bottom: 150px;
}

See demo at: http://jsfiddle.net/audetwebdesign/6gHE6/

The trick involves using the :target selector to add a margin to the bottom of the anchor equivalent to the height of the fixed header.

This generates some extra white space in your page, oh well... like I said, a bit of an odd way of doing it.

Alternatively, a JavaScript/jQuery fix might be the ticket!

How to fix my anchor link issue

4 Answers4

Linked

Related