Deslocar uma div com posicionamento absolute

Front-end JavaScript
,
#1

Estou montando caras e quero que ao clicar o card se expanda para direita, pra baixo e pra esquerda.
Ao lado desse caras existem outras divs (cards) que serão sobrescritas (o card selecionado ficará por cima dos não selecionados).
Só não consegui o deslocamento a esquerda, vi que a propriedade setoutLeft é só para leitura (ou seja consigo pela a distância máxima para do início da div mas não consigo alterar).
Estou usando só angularJS.
Alguém tem alguma dica?

#2

Não entendi bem o que você quer fazer, você esta montando caras?

Bem, pelo que consegui entender, você está querendo trabalhar com posicionamento de elementos, certo?!
O que eu posso sugerir é fazer uso do POSITION (Absolute ou Relative), usar o TOP, LEFT, BOTTOM e RIGHT para deslocar as DIVS, Z-INDEX (ou zIndex no javaScript), para colocar uns sobre outros, e uma outra dica, seria utilizar o CLASS, nos elementos e manipular estas CLASS com JavaScript, removemendo ou adicionando elas…Tipo, cada classe com zIndex diferente, ou POSISIOTNS diferentes, tudo conforme sua necessidade, evitando manipular o estilos dos elementos diretamente com JS…

Não mencionei FLOAT, porque se tiver usando POSITION ABSOLUTE ou FIXED, o FLOAT não funciona…

Espero ter ajudado!

#3

Renato: obrigado

Desculpe-me: escrevi caras mas são cards em carrossel (carrossel com divs containers que tem uma imagem, um espaço pra texto e a imagem na verdade é um buttom.) O quero que aconteça é que ao passar o mouse sobre a imagem ou clicar no botão, o card selecionado tenha dimensões maiores do que o normal (ou seja que o card selecionado sobrescreva os cards da esquerda e da direita).

Sim: estou usando posicionamento absoluto (tenho que usar o float a esquerda para quebrar o fluxo normal de html).

Consigo expandir para direita e pra baixo, mas não consigo expandir para a esquerda. Tipo:
Left = left - 10.

Espero ter sido mais claro agora.

#4

Sem problemas, agora compreendi melhor.
Só lembrando que o float não funciona em position: relative

Então…

Creio que você não está programando assim: Left = left - 10. , o correto é left:-10px; no CSS
No JS seria com igual [ = ] ;

Eu fiz um exemplo aqui, bem simples, usando apenas o CSS, mas você pode alterar o HOVER pelo onmouseon ou o onclick do JS e adicionar ou remover CLASS do elemento.

A ideia do exemplo é aumentar a altura e o tamanho do elemento, se o mouse sobrepor uma das DIVS.
Usei o z-index para trazer a DIV para frente das outras.

<style>
.default {
    background-color:#f3f3f3;
    border: 2px solid #bbb;    
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
    margin: 5px;
    width:100px;
    height:100px;
}

.default:hover {
    width:+200px;
    height:+200px;
    transition: .3s;
    z-index: 2;
    left: +20px;
    }
</style>

<div class='default' ></div><br /><br />
<div class='default' ></div><br /><br />
<div class='default' ></div><br /><br />
#5

Renato, obrigado.

Estou usando essa solução no evento hover do botão.
Mas a dificuldade esta em implementar esse deslocamento na função JS acionada pelo evento ng-click (angularJS). Não dá erro mas a div não se desloca.

Essa é a função acionada: (tem uma imagem dentro de uma div numa estrutura ng-repeat do angular):

$scope.fctSelEst = function ( idEst ) { 
	/*--------------- Muda todas as divs para o padrão inicial ------*/
	obj = document.getElementsByClassName( 'divCrdEstSel' ); 
	for (i = 0; i < obj.length; i++) { obj[ i ].className = 'divCrdEst'; } 

	/*--------------- Muda todas as imagens para o padrão inicial ------*/
	obj = document.getElementsByClassName( 'imgEstSel' ); 
	for ( i = 0; i < obj.length; i++ ) { obj[ i ].className = 'imgEst';  }

	if (  $scope.jsonEst[ idEst ].flgEst = ! $scope.jsonEst[ idEst ].flgEst ) { 
		$scope.flgShwCpm = 2;
		document.activeElement.className = 'imgEstSel'; 
		document.activeElement.parentNode.className = 'divCrdEstSel'; }
	else { $scope.flgShwCpm = 1; } }

Essas foram algumas tentativas para efetivar:

// valOri = varDiv.offsetLeft;
// varDiv.className = ‘divCrdEstSel’;
// fctFixImgEst();
// console.log( valOri + ’ - ’ + varDiv.offsetLeft + ’ - ’ + varDiv.style.left );
// if ( ( valOri >= 0 ) && ( valOri < 700 ) ) { valOri -= 20; }
// else { valOri -= 40; }
// varDiv.style.left = valOri;
// console.log( valOri + ’ - ’ + varDiv.offsetLeft + ’ - ’ + varDiv.style.left );
// varDiv.setAttribute(“offsetLeft”, valOri );
// console.log( valOri + ’ - ’ + varDiv.offsetLeft + ’ - ’ + varDiv.style.left );
// console.log( document.activeElement.parentNode.parentNode.offsetLeft );

#6

Ok Cesar, não sabia que você usava Angular, eu ainda não estudei essa linguagem, estou aprendendo o básico ainda, mas aqui tem pessoas que usam ela, talvez outros usuários do site possam te ajudar!!!