Table of contents
TOC
Réduire la table des matières
Développer la table des matières
Dernière mise à jour: 25/07/2018

Créez des éléments ayant une position absolue

S’applique aux : blocs-notes consommateur sur OneDrive | Blocs-notes Entreprise sur Office 365

Le corps d’une page OneNote peut contenir plusieurs éléments directs div, imget object enfants, qui peuvent être insérés séparément sur la page.

Attributs et comportement de positionnement

Utilisez les attributs data-absolute-enabled et style pour créer des éléments ayant une position absolue sur une page, en suivant ces instructions :

  • L’élément body doit spécifier data-absolute-enabled="true". S’il est omis ou défini sur false, tout le contenu du corps est restitué dans un élément div _default à position absolue créé par l’API, et tous les paramètres de position sont ignorés.

  • Seuls les éléments div, img et object peuvent avoir une position absolue.

  • Les éléments ayant une position absolue doivent spécifier style="position:absolute".

  • Les éléments ayant une position absolue doivent être des enfants directs de l’élément body. Les enfants directs du corps qui ne sont pas des éléments div, img ou object ayant une position absolue sont restitués de la même manière que du contenu statique, à l’intérieur de l’élément div _default à position absolue.

  • Les éléments ayant une position absolue sont positionnés selon leurs coordonnées par rapport aux bords supérieur et gauche, à partir de la position de départ 0:0 située dans le coin supérieur gauche de la page, au-dessus de la zone de titre.

  • Si un élément ayant une position absolue omet les coordonnées par rapport aux bords supérieur ou gauche, les coordonnées manquantes sont définies sur sa valeur par défaut : top:120px ou left:48px. Ces coordonnées par défaut indiquent une position située juste en dessous de la zone de titre. Sachez que l’omission des coordonnées peut entraîner l’empilage des éléments les uns sur les autres.

  • Les éléments ayant une position absolue ne peuvent pas être imbriqués ou contenir des éléments positionnés. L’API ignore tous les paramètres de position spécifiés sur les éléments imbriqués dans un élément div ayant une position absolue, restitue le contenu imbriqué dans l’élément div parent ayant une position absolue et envoie un avertissement dans la propriété api.diagnostics de la réponse.


Exemple : L'exemple suivant contient un enfant direct p, un div en position absolue et un div en position non absolue.

HTML d’entrée

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

L'API restitue le div positionné de manière non absolue dans le div par défaut. Remarquez que les balises imbriquées <div> sont ignorées car elles ne définissent aucune information sémantique (telle que data-id).

HTML de sortie

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

Exemple : L'exemple suivant crée une page contenant un div en position absolue et une image en position absolue.


HTML d’entrée

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

L'API OneNote évalue le code HTML d'entrée et préserve tout le contenu sémantique et toutes les informations structurelles pris en charge par OneNote. La page obtenue affiche les éléments illustrés dans l’image suivante (sans les bordures visibles de l’élément div et de l’image).

Page obtenue avec l’élément div et l’image ayant une position absolue

Notez les modifications apportées à l’élément div imbriqué non contributif par le code HTML d’entrée. L’API préserve le contenu de l’élément div mais ignore les balises <div>, car l’élément div ne définit pas les informations sémantiques (par exemple, data-id).

Pour en savoir plus sur la gestion des codes HTML d’entrée et de sortie par l’API OneNote, consultez l’article Code HTML d’entrée et de sortie pour les pages OneNote.

Attributs de style CSS pris en charge

Tous les éléments ayant une position absolue peuvent spécifier les positions supérieure et gauche. Les éléments div peuvent spécifier la largeur, et les images peuvent spécifier la largeur et la hauteur. Par exemple :

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
AttributÉlément pris en chargeDescription
supérieurdiv, img, objetCoordonnée sur l’axe Y de la bordure supérieure de l’élément, en pixels uniquement. Valeur par défaut : 120 pixels.

Exemple : top:140px

gauchediv, img, objetCoordonnée sur l’axe X de la bordure gauche de l’élément, en pixels uniquement. Valeur par défaut : 48 pixels.

Exemple : left:95px

largeurdiv, imgLargeur de l’élément, en pixels uniquement.

Exemple : width:480px

hauteurimgHauteur de l’élément, en pixels uniquement. Pour les balises div, la hauteur est calculée pendant l’exécution et les valeurs spécifiées sont ignorées.

Exemple : height:665px

Les autres attributs de position, tels que z-index, sont ignorés. Les images ayant une position absolue peuvent utiliser l’attribut data-render-src ou src.

Informations de la réponse

L’API OneNote renvoie les informations suivantes dans la réponse.

Données de réponseDescription
Code de succèsCode d’état HTTP 201 pour une demande POST réussie et code d’état HTTP 204 pour une demande PATCH réussie.
Erreurs ou avertissements

Vous recevrez un avertissement dans la propriété api.diagnostics de la réponse dans tous les cas suivants :

  • L'attribut style="position:absolute" est spécifié sur un élément, mais l'élément body ne précise pas data-absolute-enabled="true". Tous les paramètres de position sont ignorés.
  • L’attribut style="position:absolute" est spécifié sur un élément qui n’est pas un enfant direct de l’élément body. Si l'élément est un div, img, ou object, faites-en un enfant direct du corps ; sinon, les paramètres de poste seront ignorés.
  • L'attribut style="position:absolute" spécifié sur un élément n'est pas un div, img ou un élément objet.
En-tête X-CorrelationIdUn GUID qui identifie la requête de manière unique. Vous pouvez utiliser cette valeur avec la valeur de l'en-tête Date lorsque vous utilisez le support Microsoft pour résoudre les problèmes.

Autorisations

Pour créer ou mettre à jour des pages OneNote, vous devez demander les autorisations appropriées. Choisissez le niveau d’autorisations le plus bas dont votre application a besoin pour faire son travail.

Autorisations pour PUBLIER des pages

PlateformeÉtendue d’autorisation
Grand publicoffice.onenote_create, office.onenote_update_by_app, office.onenote_update
EntrepriseNotes.Create, Notes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Autorisations pour les pages PATCH

PlateformeÉtendue d’autorisation
Grand publicoffice.onenote_update_by_app, office.onenote_update
EntrepriseNotes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Pour en savoir plus sur les étendues d’autorisation et leur fonctionnement, consultez la section relative aux étendues d’autorisation dans OneNote.

Ressources supplémentaires

© 2018 Microsoft