43:["$","title",null,{"children":"Posicionamento em CSS - parte 2 | carolx | Observable"}] 4b:T4c6,### Pratique: No CSS acima, experimente as seguintes mudanças: - Tente centralizar os círculos na célula dos quadrados. Para isso, use as propriedades *[justify-self](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)* e *[align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)* na regra de css para os círculos - É possível fazer com que os elementos ultrapassem as dimensões da sua célula usando valores negativos para a margem do elemento. Vamos experimentar. Altere, na regra para os círculos, a propriedade *justify-self* para o valor *end*. O círculo irá se alinhar á direita. Agora, adicione uma linha e inclua a propriedade *margin-right: -25%*; **z-index** Ao colocar uma margem negativa, oprimeiro círculo ficou por trás do segundo quadrado. E se você quiser que ele passe por cima? A propriedade *z-index* permite definir quais layers ficam sobre os outros. Um elemento com *z-index: 1;* fica por cima de um elemento com *z-index: 0;* Você pode usar qualquer número – basta que o elemento que você quer por cima tenha o número maior. - Na regra para os círculos, adicione uma linha e inclua a propriedade *z-index: 1;* Os círculos agora ficam por cima.4c:[{"id":"ee1c0646933d0390f388957fbb6e39a9eeff85c7571ac08f69a5065868b8d42456f2db5daa607f6cb070a65b3680276dc9e1b619e7533879ef4ed81bd3b879e4","href":"https://static.observableusercontent.com/files/ee1c0646933d0390f388957fbb6e39a9eeff85c7571ac08f69a5065868b8d42456f2db5daa607f6cb070a65b3680276dc9e1b619e7533879ef4ed81bd3b879e4","name":"image.png","type":"image/png","lastModified":1646509676274.493,"size":33594},{"id":"770c2601d57471ab8e93d7db2c00eb08f73e57aac1162c5310cc14a219edbf865b721cce617538bcc7b343d998a7bf65f4a0eda9206d63e40e62bfb28cc862fa","href":"https://static.observableusercontent.com/files/770c2601d57471ab8e93d7db2c00eb08f73e57aac1162c5310cc14a219edbf865b721cce617538bcc7b343d998a7bf65f4a0eda9206d63e40e62bfb28cc862fa","name":"image@2.png","type":"image/png","lastModified":1646552314394.195,"size":5009},{"id":"4629cdb23ec56c09243eade49bfaaca29b9f7ec8babea4e6fd61888d6c63af3c1a369ad373fd7e51ed056a6b1041e72556b6a3054639604814ba16bfa90cbc3c","href":"https://static.observableusercontent.com/files/4629cdb23ec56c09243eade49bfaaca29b9f7ec8babea4e6fd61888d6c63af3c1a369ad373fd7e51ed056a6b1041e72556b6a3054639604814ba16bfa90cbc3c","name":"table-image@2.png","type":"image/png","lastModified":1646546788292.785,"size":2127}] 47:{"id":"6174a34b48599fbc","slug":"posicionamento-em-css-parte-2","title":"Posicionamento em CSS - parte 2","thumbnail":"237199759e661934e12a5edcff3fb98e769b3eb474fe8519b817ef186cb2c1cc","access_level":"public","create_time":"$D2022-03-05T19:42:24.067Z","update_time":"$D2022-03-13T05:04:37.573Z","view_time":null,"first_public_time":"$D2022-03-07T00:16:29.422Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":715,"publish_version":715,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"},{"type":"individual","id":"d65a29b738c2e74f","login":"tiagombp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c9efc3ec79f2da0371c9ed09baf9e22624bf7477f9dfc315c05d581f8e0a4daa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Posicionamento em CSS - parte 2","cells":[{"id":0,"value":"# Posicionamento em CSS - parte 2\nContinuando no estudo de posicionamento de elementos da página, vamos entender como funciona a opção ***display: grid*** e suas propriedades complementares.\n\nEnquanto o flexbox permite empilhar itens somente em uma direção, a opção ***display: grid;*** permite a disposição dos elementos nos dois eixos, horizontal e vertical, como numa tabela.\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\n**Dica:** É normal não lembrar de que propriedades usar ao criar um grid. Para lembrar, use uma \"cheatsheet\" visual, como a da página: https://grid.malven.co/ Você encontrará várias outras cheatsheets numa busca no google.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"# 1. colunas e linhas\nO primeiro passo é definir para o elemento que será o recipiente a propriedade ***display: grid***. Ao fazer isso, os elementos contidos dentro dele poderão ser distribuídos em linhas e colunas.\n\nPara definir o número de linhas e colunas do layout, usamos as propriedades complementares:\n- A propriedade **grid-template-columns** define o número de colunas do grid, e seus tamanhos;\n- A propriedade **grid-template-rows** define o número de linhas do grid e seus tamanhos; ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"### EXEMPLO 1-A\nObserve o layout a seguir. Temos um elemento pai `

` e vários itens internos, marcados com uma classe (*class=\"item\"*). \n\nAo definir a propriedade *display: grid*, a princípio o comportamento dos elementos com *class=\"item\"* não mostra diferenças com relação a *display: block* – os itens são empilhados na vertical e tomam 100% da largura, seguindo a altura do conteúdo. Esse é o comportamento padrão.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"\n