Tente colocar a div/as divs pai da imagem, com position: relative;

Boa tarde Matheus ,

então eu fiz o que você falou ... a imagem até travou mas agora o ela não sai do lugar quando redimensiono a página, ela some .

As alterações ficaram assim.

Código HTML

    <section class="teste">
        <div class="header">
            <div class="a">        
            <img  height="300" width="300" src="assets/img/leao.png" id="imgpos">
            Leão Teste
            </div>
    </div>
            <div class="b">Fundo Preto - -Corpo Página</div>
    </section>

Código CSS

    <section class="teste">
    <div class="header">
         <img  height="200" width="200" src="assets/img/aranha10.png" id="imgpos">
        <div class="a">      Testando     </div>
    </div>
      <div class="b">ssssssssssssssssssssss</div>         
    </section>
}


#imgpos {
    position: absolute;   
        display: block;   
        left: 70%;    
        top: 25%;   
        /*object-fit: 100%;
        object-position: bottom rigth;*/
}

.teste {
     width: 100%;
     height: 100%;
}

.teste > div {
     width: 100%;
     margin-top: 0px;
}

.header{
        background: HSL(238, 17%, 33%);
        height: 200px;
        position: relative;   
}

.a{
     color: rgba(227, 191, 99, 0.7);  
     padding: 4% 20% 0% 35%;
     font-size: 70px;

}

.b{
     background-color: HSL(0, 0%, 20%);
    padding: 0% 0% 100% 0%;
}

Oi Gabriel,

Envie um print dessa situação onde a imagem some, pois aqui no meu navegador está do jeito que acho que vc quer, e ela não some.

Fico aguardando :D

.

imagem some

Dessa forma a imagem some escrita com:

left: 950px;https://drive.google.com/open?id=0B3HzYAH-LlgfMkFETVY3MEl3cDA

#imgpos {
    position: absolute;   
        display: block;   
        left: 950px;        
        top: 10px;

}

Imagem anda

Dessa forma a imagem anda escrita com:

left: 61%;https://drive.google.com/open?id=0B3HzYAH-LlgfMWVjY3ZJUk5vX1U

#imgpos {
    position: absolute;   
        display: block;   
        left: 61%;        
        bottom: 58%;

}

OBS: Mandei as imagens em um link ... vê se abre.

É algo parecido com isso que você quer?

https://drive.google.com/open?id=0B_FATm-RgiBpUm9JaG4tcHIteG8

Vi que vc colocou o position: relative no Header. Do seu código original, deixe apenas o #imgpos com position: absolute, e a div .a com position: relative, pois ela é o pai do #imgpos. Quanto a % ou px, os dois devem funcionar pro seu caso, mas eu prefiro %.

Do seu código, alterei apenas a ordem do texto Leão Teste e da imagem, e do seu CSS, só o que eu disse acima.

HTML:

<section class="teste">
        <header class="header">
            <div class="a">        
                Leão Teste
                <img  height="300" width="300" src="cobras_chapeu3.jpg" id="imgpos">
            </div>
        </header>
                <div class="b">Fundo Preto - -Corpo Página</div>
    </section>

CSS

#imgpos {
                position: absolute;
                bottom: 20%;
        }

        .teste {
                margin: 0% 0 0 0%;
                width: 100%;
                height: 100%;
        }
        .teste > div {
                width: 100%;
                margin-top: 0px;
        }

        .header{
                background: HSL(238, 17%, 33%);
                height: 300px;
        }

        .a{
             color: rgba(227, 191, 99, 0.7);  
             text-align: center;
             padding: 90px;
             font-size: 100px;
             position: relative;
        }

        .b{
             background-color: HSL(0, 0%, 20%);
            padding: 0% 0% 100% 0%;
        }

Opa Matheus.

Então eu preciso posicionar a imagem sobrepondo um pouco o texto e pra isso eu preciso manipular as direções topo, direita, esquerda etc ....

Se eu colocar left: 62%; deixando a imagem mais próxima do texto ai não funciona, voltando a estaca zero.

Da forma como você me mandou funcionou mas se eu diminuir de mais a tela a imagem quebra cai pra baixo .... ela teria que redimensionar junto. Eu alterei os tamanhos da imagem para porcentagens, melhorou a quebra da imagem mas mesmo assim não dá para diminuir toda a tela.

Existe alguma forma da imagem reduzir de tamanho junto com a tela sem quebrar ?

Seguem alterações.

HTML:

<section class="teste">
        <header class="header">
            <div class="a">        
                Leão Teste
                 **<img  height="100%" width="100%" src="assets/img/leao.png" id="imgpos">**
            </div>
        </header>
                <div class="b">Fundo Preto - -Corpo Página</div>
    </section>

CSS

#imgpos {
                position: absolute;
                bottom: 0%;
                **left: 62%;**

        }

Segue Imagems.

Tem a imagem Original como fica ao abrir a página e a imagem Reduzida quando redimensiono a mesa.

https://drive.google.com/open?id=0B3HzYAH-LlgfUG52R05kWHhfN28

A questão é tem como ficar o mais próximo possível da página original mesmo reduzindo ?

A imagem e o texto não tem como diminuírem juntos de forma proporcional ... sem quebrar tanto ?

Eu acho que agora deu certo.

Coloquei a imagem em porcentagem e o tamanho da fonte em porcentagem também;

Gostaria de saber ainda se é possível ao minimizar a página fazer com que o conteúdo do zoom também diminua de forma proporcional.

Observe na foto do link que o texto manteve o tamanho original não sendo aplicado o zoom na letra mas apenas a imagem.

https://drive.google.com/drive/folders/0B3HzYAH-LlgfY1A4bWVxUVpReU0

Se tiver alguma solução ficarei grato.

Obrigado pela atenção.

OBS: Deixei a mesma IMG para Download !!!

HTML

<section class="teste">
        <header class="header">
            <div class="a" >        
               A
                 <img  height="40%" width="20%" src="assets/img/asa.png" id="imgpos">
            </div>
        </header>
                <div class="b">Fundo Preto - -Corpo Página</div>
    </section>

CSS

#imgpos {
        position: absolute;
        float: absolute;
        top: 20%;
        left: 39.85%;
}

.teste {
        margin: 0% 0 0 0%;
        width: 100%;
        height: 100%;
        }
.teste > div {
        width: 100%;
        margin-top: 0px;
}

.header{
        background: HSL(238, 17%, 33%);
        height: 300px;
        }

.a{
        color: rgba(227, 191, 99, 0.7);  
        text-align: center;  
        font-size: 1000%; 
        position: relative;
}

.b{
        background-color: HSL(0, 0%, 20%);
        padding: 0% 0% 100% 0%;
}