Как разместить текст href поверх прямоугольника div?

Question

Всякий раз, когда я помещаю текст поверх прямоугольника, он не позволяет мне больше щелкнуть ссылку. Как я могу это исправить? Кроме того,

всякий раз, когда я пытаюсь изменить цвет текста «Сан-Диего», он не позволяет мне изменять положение текста. Кстати, я новичок в HTML.

#ViewOnMaps { 
 
    background-color: #FF604C; 
 
    height: 35px; 
 
    width: 150px; 
 
    position: absolute; 
 
    top: 245px; 
 
    left: 50px; 
 
    opacity: .5; 
 
    } 
 
    #circular { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 150px; 
 
    -webkit-border-radius: 150px; 
 
    -moz-border-radius: 150px; 
 
    background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 45px; 
 
    } 
 
    span.SanDiego { 
 
    position: absolute; 
 
    top: 250px; 
 
    left: 70px; 
 
    width: 100%; 
 
    font-size: 20px; 
 
    color: #999; 
 
    } 
 
    span.ViewOnMaps { 
 
    position: absolute; 
 
    top: 235px; 
 
    left: 78px; 
 
    } 
 
    #maps { 
 
    background-color: white; 
 
    height: 300px; 
 
    width: 220px; 
 
    border-style: solid; 
 
    border-color: #B4B4B4 
 
    } 
 
    #menu { 
 
    position: absolute; 
 
    right: 52px; 
 
    bottom: 638px; 
 
    } 
 
    body { 
 
    background-color: #E8E8E8; 
 
    } 
 
    nav { 
 
    background-color: white; 
 
    height: 75px; 
 
    width: 1140px; 
 
    float: right; 
 
    border-style: solid; 
 
    border-color: #B4B4B4 
 
    } 
 
    nav ul {} nav ul li { 
 
    list-style-type: none; 
 
    width: 150px; 
 
    float: left; 
 
    text-align: center; 
 
    } 
 
    li a { 
 
    text-decoration: none; 
 
    color: #999; 
 
    line-height: 50px; 
 
    display: block; 
 
    } 
 
    li a:hover { 
 
    text-decoration: underline; 
 
    color: #FF604C; 
 
    }

<nav> 
 
    <ul id="menu"> 
 
    <li><a href="flatuigoal.html">Home</a> 
 
    </li> 
 
    <li><a href="gallery.html">Gallery</a> 
 
    </li> 
 
    <li><a href="#">Message</a> 
 
    </li> 
 
    <li><a href="#">Music</a> 
 
    </li> 
 
    <li><a href="#">Search</a> 
 
    </li> 
 
    <li><a href="#">Settings</a> 
 
    </li> 
 
    <li><a href="#">Location</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div id="maps"></div> 
 
<div id="circular"></div> 
 
<span class="SanDiego"> 
 
    \t \t \t <a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a> 
 
    \t \t </span> 
 
<div id="ViewOnMaps"></div>

Answer 1

Изменить/добавить свой стиль с этим

span.SanDiego { 
    position: absolute; 
    top: 250px; 
    left: 70px; 
    width: 100%; 
    font-size: 20px; 
    z-index:1; 
} 
.SanDiego a {color:red} /*--Change your text's color here--*/ 

Demo

Answer 2

Вы использовали ненужное позиционирование элементов во всем мире. Если вы используете абсолютную позицию, вы должны указать позицию: относительно родительского div, иначе позиция будет относиться к телу html.

Я не понял ваш вопрос правильно, но из того, что я получаю, я попытался решить его как можно больше. Вот решение: http://codepen.io/vikrantnegi007/pen/LVqvjN

HTML код:

<div id="maps"> 
    <div id="circular"> 

    </div> 
    <div class="SanDiego"> 
     <a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a> 
    </div> 

</div> 

    <nav> 
    <ul id="menu"> 
    <li><a href="flatuigoal.html">Home</a> 
    </li> 
    <li><a href="gallery.html">Gallery</a> 
    </li> 
    <li><a href="#">Message</a> 
    </li> 
    <li><a href="#">Music</a> 
    </li> 
    <li><a href="#">Search</a> 
    </li> 
    <li><a href="#">Settings</a> 
    </li> 
    <li><a href="#">Location</a> 
    </li> 
    </ul> 
</nav> 

CSS код:

#circular { 
    width: 150px; 
    height: 150px; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat; 
    position: absolute; 
    top: 15px; 
    left: 35px; 
    } 
    div.SanDiego { 
    background-color: #ff604c; 
    padding: 15px; 
    opacity: 0.5; 
    position: absolute; 
    top: 220px; 
    left: 35px;  
    font-size: 20px; 
    color: #999; 
    } 

    #maps { 
    background-color: white; 
    height: 300px; 
    width: 220px; 
    border-style: solid; 
    border-color: #B4B4B4; 
    float: left; 
    position: relative; 
    } 
    #menu { 

    right: 52px; 
    bottom: 638px; 
    } 
    body { 
    background-color: #E8E8E8; 
    } 
    nav { 
    background-color: white; 
    height: 75px; 
    width: 1140px; 
    float: left; 
    border-style: solid; 
    border-color: #B4B4B4; 
    margin-left: 30px; 
    } 
    nav ul {} nav ul li { 
    list-style-type: none; 
    width: 150px; 
    float: left; 
    text-align: center; 
    } 
    li a { 
    text-decoration: none; 
    color: #999; 
    line-height: 50px; 
    display: block; 
    } 
    li a:hover { 
    text-decoration: underline; 
    color: #FF604C; 
    } 

Скажите мне, если есть что-то, что вы хотите с ним делать.